/* Vera Medical — design tokens.
 * Direction: "Clinical Precision" — a calm medical-neutral base (~90%) with the
 * red -> purple -> blue brand gradient used as a RESTRAINED signature (~10%):
 * logo mark, a hairline hero accent, and the primary CTA only.
 * Variable NAMES from Task 1 are preserved so templates need no change; new
 * tokens (type scale, radius, shadow, motion, extra spacing) are additive. */

:root {
  /* --- Neutral base (~90% of surface) --- */
  --color-bg: #fbfcfe;        /* cool near-white, faint blue-grey undertone */
  --color-fg: #12151b;        /* deep ink / near-black text */
  --color-muted: #5a6472;     /* one cool slate neutral (AA on --color-bg) */
  --color-surface: #f1f4f8;   /* alternating section surface */
  --color-line: #dde3ec;      /* hairline rules / borders */
  --color-line-strong: #c8d0dc;
  --color-on-accent: #ffffff; /* text on gradient CTA */

  /* --- Brand gradient (the ~10% signature) ---
   * Stops refined for medical-grade elegance while keeping the red->purple->blue
   * identity (slightly deepened red, cooler blue for a more clinical feel). */
  --grad-a: #c9443c;
  --grad-b: #8a5ad0;
  --grad-c: #3f6fe0;
  --brand-gradient: linear-gradient(105deg, var(--grad-a) 0%, var(--grad-b) 52%, var(--grad-c) 100%);

  /* Accessible link color (AA on --color-bg). Kept distinct from --grad-c usage
   * in the gradient so links stay legible. */
  --color-link: #2f5fd0;

  /* --- Typography ---
   * Display: a refined serif (Iowan/Palatino/Georgia-class) for confident,
   * clinical-but-warm headlines. Body: a humanist sans system stack.
   * NOTE: real self-hosted fonts can be prepended here later (see fonts.css)
   * with no template change. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif;

  /* Fluid-ish modular type scale (~1.25) */
  --step--1: 0.86rem;
  --step-0:  1.02rem;   /* base body */
  --step-1:  1.2rem;
  --step-2:  1.6rem;
  --step-3:  2.2rem;
  --step-4:  clamp(2.2rem, 1.4rem + 3vw, 3rem);
  --step-5:  clamp(2.6rem, 1.2rem + 5vw, 4.1rem);
  --leading-tight: 1.08;
  --leading-body: 1.62;
  --tracking-eyebrow: 0.16em;

  /* --- Spacing (Task 1 names --space-1..6 preserved; --space-5/7 added) --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 3.5rem;
  --space-6: 4rem;
  --space-7: 7rem;

  /* --- Radius --- */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* --- Elevation (whisper-soft; precision, not drama) --- */
  --shadow-sm: 0 1px 2px rgba(18,21,27,.05), 0 1px 1px rgba(18,21,27,.03);
  --shadow-md: 0 12px 30px -12px rgba(18,21,27,.14), 0 2px 6px rgba(18,21,27,.05);
  --shadow-accent: 0 6px 18px -8px rgba(138,90,208,.5);

  /* --- Motion --- */
  --dur-fast: 160ms;
  --dur: 220ms;
  --ease: cubic-bezier(.2,.6,.2,1);
  --hero-glow: .05;   /* opacity of the subtle hero background wash */

  /* --- Layout --- */
  --maxw: 70rem;
  --maxw-text: 44rem;
  --focus-ring: 0 0 0 3px rgba(63,111,224,.45);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0d0f12;
    --color-fg: #e8ebef;
    --color-muted: #a6b0bd;        /* AA on --color-bg */
    --color-surface: #161a1f;
    --color-line: #262c34;
    --color-line-strong: #363d47;
    --color-on-accent: #ffffff;
    --color-link: #8aa8ff;          /* lighter blue for AA on dark */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 16px 36px -14px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
    --shadow-accent: 0 8px 22px -8px rgba(138,90,208,.55);
    --hero-glow: .09;
  }
}