/*
  FINABI Design System — tokens.css
  Canonical FINABI design tokens (color, typography, spacing, radius,
  shadow, breakpoints, z-index, transition). No selectors targeting live
  site markup — custom properties only.

  Deployment status is environment-specific and changes over time — do not
  assume it from this comment or from the LOCAL repo state alone. See
  DESIGN-SYSTEM.md's Environment Status Table (verified against live
  TEST/PROD, not LOCAL) for the current state per environment (FIN-129 /
  FIN-130 / FIN-131). Being custom properties only, linking this file does
  not itself change any live page — legacy pages keep rendering from
  style.css's hardcoded hex values until migrated page-by-page (EPIC-011).
  Consumed today only by base.css (.ds-scope) and components.css (ds-*
  prefixed classes) — both currently LOCAL-only, see DESIGN-SYSTEM.md.
  See design-system audit (2026-07-06) for rationale behind each value.

  BRAND BOOK UPDATE (2026-07-06):
  --color-primary and --color-red-primary now reflect the official FINABI
  brand book, not the hex values found in the live site's CSS.
  --color-primary is NO LONGER numerically identical to the live site's
  #fbdd40 / #FFD700 — do not use --color-primary to replace those values
  in style.css until the brand-yellow migration (separate, approved step)
  runs. See DESIGN-SYSTEM.md / migration report for the brand-vs-current
  discrepancy table and the planned #fbdd40 / #FFD700 → #FFE128 migration.
*/

:root{

  /* ---- Color: brand (FINABI brand book, 2026-07-06) ---- */
  --color-primary: #FFE128;         /* brand book primary yellow, Pantone 106 — NOT identical to live #fbdd40/#FFD700 */
  --color-primary-hover: #FFDC05;   /* FIN-045: #FFE128 (H51.6 S100% L57.8%) darkened 12% lightness, same hue/saturation — Pantone 106 family preserved */
  --color-primary-ink: #161616;     /* text placed on top of --color-primary */
  --color-secondary: #007DC4;
  --color-label: #6A5B00; /* eyebrow/label text on yellow surfaces */

  /* ---- Color: brand palette (FINABI brand book, 2026-07-06) ---- */
  --color-yellow-primary: #FFE128;  /* = --color-primary, kept as an explicit brand-palette alias */
  --color-yellow-100: #FFB900;      /* secondary yellow */
  --color-orange-100: #FA8C00;      /* secondary yellow/orange */
  --color-orange-200: #F56900;      /* secondary yellow/orange */
  --color-red-primary: #E10032;     /* brand book primary red, Pantone 485 */
  --color-red-accent: #F54137;      /* secondary red */

  /* ---- Color: semantic ---- */
  --color-success: #2E7D32;
  --color-success-bg: #F1F8F2;
  --color-success-border: #C7E3CE;

  --color-warning: #8A6D1F;
  --color-warning-bg: #FFF7DF;
  --color-warning-border: #F0D98B;

  --color-danger: #C0392B;
  --color-danger-bg: #FFF8F6;
  --color-danger-border: #FBD0C8;

  /* ---- Color: neutral ---- */
  --color-ink: #161616;        /* primary text on light surfaces */
  --color-ink-2: #5C6570;      /* secondary/muted text */
  --color-border: #E3E8EC;     /* default card/section border */
  --color-border-strong: #D0D0D0; /* form input border */
  --color-bg: #FFFFFF;
  --color-bg-muted: #F7F8FA;
  --color-bg-tint: #F4F8FB;    /* light blue hero/section tint */
  --color-bg-page: #F2F2F2;    /* page background */

  /* ---- Typography ---- */
  --font-family-base: 'PT Sans', Arial, sans-serif;

  --font-size-xs: .75rem;    /* 12px — captions, badges */
  --font-size-sm: .875rem;   /* 14px — secondary text, labels */
  --font-size-base: 1rem;    /* 16px — body */
  --font-size-md: 1.125rem;  /* 18px — lead paragraph */
  --font-size-lg: 1.375rem;  /* 22px — H4 / small H3 */
  --font-size-xl: 1.75rem;   /* 28px — H3 */
  --font-size-2xl: 2.125rem; /* 34px — H2 */
  --font-size-3xl: 2.625rem; /* 42px — H1 (content pages) */
  --font-size-hero: clamp(34px, 4.2vw, 52px); /* H1 — homepage hero only */

  --font-weight-body: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-hero: 800; /* homepage hero H1 only — the one deliberate exception */

  --line-height-heading: 1.2;
  --line-height-body: 1.6;
  --line-height-button: 1.55;

  --letter-spacing-eyebrow: .04em;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 48px;
  --space-10: 56px;

  /* ---- Radius scale ---- */
  --radius-sm: 6px;
  --radius-md: 8px;    /* default — cards, buttons, inputs */
  --radius-lg: 10px;   /* icon containers, small feature cards */
  --radius-xl: 12px;   /* hero-scale elements */
  --radius-2xl: 28px;  /* large hero/section panels */
  --radius-signature: 40px; /* soft yellow panels only (footer, .bg blocks) — deliberate exception, not a generic option */
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Elevation (box-shadow) ---- */
  --shadow-sm: 0 1px 4px rgba(17,17,17,.05);
  --shadow-md: 0 4px 16px rgba(17,17,17,.08);
  --shadow-lg: 0 12px 28px rgba(17,17,17,.10);
  --shadow-xl: 0 22px 60px rgba(17,17,17,.20);

  /* ---- Containers / breakpoints ---- */
  --container-max: 1160px;
  --bp-xs-fine: 400px;  /* the one justified extra mobile-refinement tier */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;

  /* ---- Z-index scale ---- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ---- Transitions ---- */
  --transition-fast: .15s ease;
  --transition-base: .2s ease;
  --transition-slow: .3s ease;
}