/* ============================================================
   NetReport design tokens — "Heritage navy & gold"
   One colour system, two surfaces:
   - Light (default)  → marketing site
   - [data-theme=dark] → portal, dashboards, demo
   Drop this file in as tokens.css and reference variables only.
   Never hardcode a hex in page CSS — everything comes from here.
   ============================================================ */

:root {
  /* ---- Core palette ramps ---- */
  /* Navy (brand ink) */
  --navy-900: #081423;
  --navy-800: #0B1B2E;   /* dark surface base */
  --navy-700: #10243E;   /* light-mode ink */
  --navy-600: #17324F;
  --navy-500: #24466B;
  --navy-300: #6C87A6;
  --navy-200: #9FB2C8;
  --navy-100: #D8E0EA;

  /* Gold (signature accent) */
  --gold-700: #7A5D20;
  --gold-600: #96742B;   /* accessible gold on light backgrounds */
  --gold-500: #B08F3F;
  --gold-400: #D9B25F;   /* display gold on dark backgrounds */
  --gold-300: #E6C88A;
  --gold-100: #F4E8CE;

  /* Teal (positive / data) */
  --teal-700: #14554C;
  --teal-600: #1F6E63;   /* light-mode positive */
  --teal-400: #3FBFAD;   /* dark-mode positive */
  --teal-100: #DDF1EE;

  /* Rose (negative / alerts) */
  --rose-600: #B03A44;
  --rose-400: #E8626D;
  --rose-100: #F9E3E5;

  /* Cream neutrals (light mode) */
  --cream-50:  #FCFAF5;
  --cream-100: #FAF7F0;  /* page background */
  --cream-200: #F1EBDD;
  --cream-300: #E4DCC9;

  /* ---- Semantic: LIGHT (marketing) ---- */
  --bg:            var(--cream-100);
  --bg-raised:     #FFFFFF;
  --bg-inset:      var(--cream-200);
  --ink:           var(--navy-700);
  --ink-secondary: #46586E;
  --ink-muted:     #7A8798;
  --accent:        var(--gold-600);
  --accent-strong: var(--gold-700);
  --positive:      var(--teal-600);
  --negative:      var(--rose-600);
  --line:          rgba(16, 36, 62, 0.12);
  --line-strong:   rgba(16, 36, 62, 0.24);
  --link:          var(--navy-600);
  --focus:         var(--gold-500);

  /* ---- Typography ---- */
  --font-display: 'Fraunces', Georgia, serif;         /* headlines, big numbers */
  --font-body:    'Instrument Sans', system-ui, sans-serif;
  --font-data:    'Instrument Sans', system-ui, sans-serif; /* with font-variant-numeric: tabular-nums */

  --text-xs:   0.8125rem;  /* 13px  captions, chips */
  --text-sm:   0.9375rem;  /* 15px  UI, secondary   */
  --text-base: 1.0625rem;  /* 17px  body            */
  --text-lg:   1.25rem;    /* 20px  leads           */
  --text-xl:   1.625rem;   /* 26px  section heads   */
  --text-2xl:  2.25rem;    /* 36px  page heads      */
  --text-hero: clamp(2.6rem, 5.5vw, 4.25rem);
  --text-stat: clamp(1.9rem, 3.2vw, 2.8rem);

  --leading-tight: 1.12;
  --leading-body:  1.65;
  --tracking-caps: 0.14em;  /* for gold eyebrow labels */

  /* ---- Shape & space ---- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --space-1: 6px;  --space-2: 12px; --space-3: 20px;
  --space-4: 32px; --space-5: 52px; --space-6: 84px;
  --container: 1160px;

  /* ---- Elevation ---- */
  --shadow-card:  0 1px 2px rgba(8,20,35,.05), 0 8px 28px rgba(8,20,35,.07);
  --shadow-float: 0 2px 6px rgba(8,20,35,.08), 0 24px 60px rgba(8,20,35,.16);
  --hairline-gold: 1px solid rgba(150,116,43,.35);

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(.2,.8,.2,1);
  --dur-fast:  160ms;
  --dur-base:  320ms;
  --dur-slow:  700ms;   /* number count-ups, beam slides */
}

/* ---- Semantic: DARK (portal, dashboards, demo) ---- */
[data-theme="dark"] {
  --bg:            var(--navy-800);
  --bg-raised:     #102338;
  --bg-inset:      #0D1E31;
  --ink:           #F2EFE6;          /* warm off-white, matches cream family */
  --ink-secondary: #B9C4D2;
  --ink-muted:     #8FA3B8;
  --accent:        var(--gold-400);
  --accent-strong: var(--gold-300);
  --positive:      var(--teal-400);
  --negative:      var(--rose-400);
  --line:          rgba(242,239,230,.09);
  --line-strong:   rgba(242,239,230,.18);
  --link:          var(--gold-400);
  --focus:         var(--gold-400);
  --shadow-card:   0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  --shadow-float:  0 2px 8px rgba(0,0,0,.4), 0 28px 70px rgba(0,0,0,.5);
  --hairline-gold: 1px solid rgba(217,178,95,.30);
}

/* ============================================================
   Usage rules (the discipline that makes it look expensive)
   ============================================================
   1. Gold is a garnish, not a wall colour. Use it for: eyebrow
      labels, hairline rules, key stats, active states, the logo
      mark. Never large gold fills, never gold body text.
   2. Fraunces for headlines and hero numbers ONLY. Everything
      else is Instrument Sans. Two faces, strict jobs.
   3. Data colours (teal/rose) mean up/down, good/bad — nothing
      else. Never decorate with them.
   4. One dark "instrument" panel per light page section max —
      the dark dashboard embedded in cream is the brand moment;
      repeating it everywhere kills it.
   5. All numerals in data contexts: font-variant-numeric:
      tabular-nums, so columns never jitter.
   6. Buttons: primary = navy fill + cream text (gold on hover
      underline/border). Never a gold-filled button — gold fails
      contrast with white text and looks cheap filled.
   7. Focus states always visible: 2px var(--focus) outline,
      2px offset. Non-negotiable.
   ============================================================ */