/* =========================================================================
   Design tokens — Value A Company (round 2 / final)

   Source of truth for every page in this mockup set. Each token name carries
   forward verbatim into the production app's theme so design feedback maps
   one-for-one to implementation (see docs/build-plan.md, decision #3).

   Changes vs round 1:
   - Accent corrected from #0f766e to #10746F (VAC brand teal, exact match).
   - Brand gradient (#10746F → #1E3A8A) exposed as a token for the range
     component and any future brand moments.
   - --font-serif now Spectral (Google Fonts, OFL) — chosen as the open-source
     stand-in for Beaufort Pro, used on headings and editorial body.
   - Body type stack still Inter; mono unchanged.
   ========================================================================= */

:root {
  /* ---- Color: neutral surface scale (cool gray, conservative) ---- */
  --color-bg:           #ffffff;
  --color-bg-subtle:    #f7f8fa;   /* page sections, alternating bands */
  --color-bg-muted:     #eef1f5;   /* card hover, secondary surfaces  */
  --color-border:       #e2e6ec;
  --color-border-strong:#cdd3dc;
  --color-divider:      #eef1f5;

  /* ---- Color: text ---- */
  --color-text:         #0f172a;   /* primary, near-black slate       */
  --color-text-muted:   #475569;   /* secondary copy                   */
  --color-text-subtle:  #64748b;   /* meta, captions, helper           */
  --color-text-inverse: #ffffff;

  /* ---- Color: brand ---- */
  --color-primary:        #1E3A8A;   /* VAC blue — matches tailwind blue-900 exactly */
  --color-primary-hover:  #1e40af;
  --color-primary-pressed:#1c3478;
  --color-primary-soft:   #eef2fb;   /* tinted background for primary chips */

  /* Brand teal — derived from the logo gradient stop at .55 offset */
  --color-accent:         #10746F;
  --color-accent-hover:   #0e6663;
  --color-accent-soft:    #e6f3f1;   /* tinted background for teal chips */

  /* Brand gradient — the logo's signature, vertical teal → blue.
     Used on the valuation range fill and very sparingly elsewhere. */
  --gradient-brand:       linear-gradient(180deg, #10746F 0%, #10746F 55%, #1E3A8A 100%);
  --gradient-brand-h:     linear-gradient(90deg,  #10746F 0%, #10746F 55%, #1E3A8A 100%);

  /* ---- Color: semantic (used for badges/status only, not CTA hype) ---- */
  --color-info:           var(--color-primary);
  --color-info-soft:      var(--color-primary-soft);
  --color-warn:           #92400e;
  --color-warn-soft:      #fef3c7;
  --color-error:          #991b1b;
  --color-error-soft:     #fee2e2;
  --color-success:        #166534;
  --color-success-soft:   #dcfce7;

  /* ---- Typography ---- */
  /*
     Headlines & editorial body: Spectral (Google Fonts, OFL).
     Chosen as the open-source stand-in for the Beaufort Pro logo wordmark —
     sharp serif designed specifically for screen rendering.

     UI & body: Inter (Google Fonts, OFL). The "Inter Variable" subset is
     loaded by base.css for fine-grained weight control.
  */
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Type scale — modular, 1.2 ratio, anchored at 16px */
  --fs-12: 0.75rem;     /* meta, legal */
  --fs-14: 0.875rem;    /* helper, dense UI */
  --fs-16: 1rem;        /* body */
  --fs-18: 1.125rem;    /* lead body, large input */
  --fs-20: 1.25rem;     /* small heading */
  --fs-24: 1.5rem;      /* h4 */
  --fs-30: 1.875rem;    /* h3 */
  --fs-36: 2.25rem;     /* h2 */
  --fs-48: 3rem;        /* h1 (mobile clamp) */
  --fs-60: 3.75rem;     /* hero (desktop) */

  /* Line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Tracking */
  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;     /* eyebrow labels, all-caps */

  /* ---- Spacing scale (4px base, T-shirt sized) ---- */
  --sp-1:  0.25rem;   /* 4  */
  --sp-2:  0.5rem;    /* 8  */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  3rem;      /* 48 */
  --sp-8:  4rem;      /* 64 */
  --sp-9:  6rem;      /* 96 */
  --sp-10: 8rem;      /* 128 */

  /* ---- Radius ---- */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* ---- Elevation (subtle, no heavy shadows — credibility cues) ---- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06),
               0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08),
               0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10),
               0 4px 10px rgba(15, 23, 42, 0.05);

  /* ---- Layout ---- */
  --container-max:    1200px;
  --container-narrow: 760px;     /* article / form-centric pages */
  --container-px:     var(--sp-5);

  /* Top-bar height — used by sticky offsets so the class-switcher sticks
     flush under the nav. Kept here so a single change ripples everywhere. */
  --topbar-h:         64px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* ---- Z-index ---- */
  --z-nav:        100;
  --z-nav-drawer: 110;
  --z-modal:     1000;
}