/* ==========================================================================
   Design tokens — ported verbatim from design_reference/tokens/*.css
   Do not introduce new values here; every value in the site traces to a
   token defined in this file. See design_reference/ for the source of truth.
   ========================================================================== */

/* ---- colors.css ---- */
:root {
  /* Brand navy - sampled from the logo mark (#00001A core, lifted for screen) */
  --navy-950: #05061A;
  --navy-900: #0A0F2C;
  --navy-800: #131A3F;
  --navy-700: #1F2752;
  --navy-600: #333C6B;
  --navy-400: #6B72A0;
  --navy-200: #C3C6DA;
  --navy-50:  #EDEEF4;

  /* Brand gold - sampled from the logo wordmark (#908858) */
  --gold-700: #5E5834;
  --gold-600: #746C41;
  --gold-500: #908858;
  --gold-400: #A79E72;
  --gold-300: #C4BC98;
  --gold-200: #DED7BC;
  --gold-100: #EFEADB;
  --gold-50:  #F8F5EC;

  /* Warm paper neutrals */
  --ink-900: #17171C;
  --ink-700: #3A3A42;
  --ink-500: #63636D;
  --ink-400: #8A8A93;
  --ink-300: #B6B4AC;
  --ink-200: #DEDBD1;
  --ink-100: #EDEAE1;
  --paper-2: #F4F2EA;
  --paper-1: #FBFAF6;
  --white:   #FFFFFF;

  /* Semantic - ledger */
  --credit-700: #1F4C39;
  --credit-500: #2F6B4F;
  --credit-100: #E3EEE8;
  --debit-700:  #7E2A1C;
  --debit-500:  #A63C29;
  --debit-100:  #F6E4DF;
  --flag-600:   #9A6A12;
  --flag-500:   #B98218;
  --flag-100:   #F8EED6;
  --info-500:   #2C4C8C;
  --info-100:   #E4EAF5;

  /* Semantic aliases - use these in components */
  --brand:            var(--navy-900);
  --brand-hover:      var(--navy-800);
  --brand-press:      var(--navy-950);
  --accent:           var(--gold-500);
  --accent-hover:     var(--gold-600);
  --accent-soft:      var(--gold-100);

  --text-heading:     var(--navy-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-500);
  --text-inverse:     var(--paper-1);
  --text-accent:      var(--gold-600);
  --text-link:        var(--navy-800);
  --text-link-hover:  var(--gold-600);

  --surface-page:     var(--paper-1);
  --surface-sunken:   var(--paper-2);
  --surface-card:     var(--white);
  --surface-inverse:  var(--navy-900);
  --surface-accent:   var(--gold-50);

  --border-subtle:    var(--ink-100);
  --border-default:   var(--ink-200);
  --border-strong:    var(--navy-200);
  --border-rule:      var(--navy-900);

  --focus-ring:       var(--gold-500);

  --positive:         var(--credit-500);
  --negative:         var(--debit-500);
  --caution:          var(--flag-500);
}

/* ---- elevation.css ---- */
:root {
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(10, 15, 44, 0.06);
  --shadow-2: 0 2px 6px rgba(10, 15, 44, 0.08);
  --shadow-3: 0 8px 20px rgba(10, 15, 44, 0.10);
  --shadow-4: 0 18px 44px rgba(10, 15, 44, 0.16);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --ring-focus: 0 0 0 3px rgba(144, 136, 88, 0.45);
  --ring-error: 0 0 0 3px rgba(166, 60, 41, 0.28);
}

/* ---- fonts.css ----
   Self-hosted (see /assets/fonts) instead of the Google Fonts CDN @import in
   the original token file — this is intentional; see README "Recommended stack". */
:root {
  --font-display: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Libre Franklin", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --font-numeric: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
}

/* ---- motion.css ---- */
:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 90ms;
  --dur-2: 160ms;
  --dur-3: 240ms;
  --dur-4: 380ms;
  --lift-hover: translateY(-1px);
  --press-scale: 0.985;
}

/* ---- radii.css ---- */
:root {
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 10px;
  --radius-pill: 999px;
  --radius-control: var(--radius-2);
  --radius-card: var(--radius-3);
  --radius-sheet: var(--radius-4);
  --border-w: 1px;
  --border-w-strong: 2px;
  --rule-w: 3px;
}

/* ---- spacing.css ---- */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --gutter-page: var(--space-6);
  --gutter-page-lg: var(--space-7);
  --section-y: var(--space-9);
  --card-pad: var(--space-5);
  --field-gap: var(--space-3);
  --max-width: 1160px;
  --max-width-doc: 720px;
  --control-h-sm: 34px;
  --control-h: 42px;
  --control-h-lg: 50px;
}

/* ---- typography.css ---- */
:root {
  --type-display-1:   700 clamp(40px, 5.2vw, 68px)/1.05 var(--font-display);
  --type-display-2:   700 clamp(32px, 3.6vw, 46px)/1.1  var(--font-display);
  --type-heading-1:   600 30px/1.2 var(--font-display);
  --type-heading-2:   600 22px/1.3 var(--font-display);
  --type-heading-3:   600 17px/1.35 var(--font-body);

  --type-body-lg:     400 18px/1.6 var(--font-body);
  --type-body:        400 16px/1.6 var(--font-body);
  --type-body-sm:     400 14px/1.55 var(--font-body);
  --type-caption:     400 12px/1.45 var(--font-body);
  --type-label:       600 12px/1.2 var(--font-body);
  --type-eyebrow:     600 12px/1.2 var(--font-body);
  --type-button:      600 15px/1 var(--font-body);

  --type-figure-lg:   500 32px/1.1 var(--font-numeric);
  --type-figure:      500 16px/1.4 var(--font-numeric);
  --type-figure-sm:   400 13px/1.4 var(--font-numeric);

  --tracking-eyebrow: 0.14em;
  --tracking-display: -0.015em;
  --tracking-wordmark: 0.06em;

  --measure-prose: 62ch;
  --measure-narrow: 46ch;
}

/* Mobile gutter override — see README "Responsive behavior" (<768px: 32px -> 16px) */
@media (max-width: 767px) {
  :root {
    --gutter-page: var(--space-4);
  }
}