/* ============================================================================
   Corazón de Manzana — Design Tokens  (generated by the brand-architect skill)
   Architecture: PRIMITIVES (raw brand values) → SEMANTICS (role tokens the UI
   consumes). Light theme is default; [data-theme="dark"] flips it.

   Usage ratio: ~60% warm off-whites / ~33% ink & deep blue / ~7% cobalt accent.
   The status palette is RESERVED — never re-theme it per brand.
   ============================================================================ */

:root {
  /* ---- 1. PRIMITIVES ----------------------------------------------------- */

  /* Ink / dark family (blue-leaning darks, darkest → lighter dark surfaces) */
  --brand-ink-900:   #131B2E;   /* primary ink / dark canvas (navy-ink) */
  --brand-ink-800:   #1A2540;
  --brand-ink-700:   #223055;
  --brand-ink-600:   #2E4070;

  /* Brand accent + variants */
  --brand-accent:         #1D4ED8;   /* cobalt — core accent; passes AA on canvas (≈6.2:1) */
  --brand-accent-light:   #6D8FF0;   /* interactive accent on dark */
  --brand-accent-lighter: #A3BAF8;   /* hover / highlight on dark */
  --brand-accent-deep:    #1E3A8A;   /* deep ink-blue — hover on light, headline blue */
  --brand-accent-ink:     #172B66;   /* AA-strict accent text on light */

  /* Warm light neutrals (never pure white as canvas) */
  --brand-canvas:    #F7F5F0;   /* primary light canvas — warm off-white */
  --brand-bone:      #FBFAF6;   /* raised surface on canvas */
  --brand-paper:     #FFFFFF;   /* pure card (reserved for cards/plots only) */
  --brand-sunken:    #EFECE4;   /* wells / section tint / table zebra */

  /* Support neutrals + hairlines */
  --brand-muted:        #5D6472;   /* muted text */
  --brand-muted-600:    #3F4757;   /* secondary text on light */
  --brand-hairline-lt:  #E4E1D8;   /* 1px border on light (warm) */
  --brand-hairline-dk:  #27334E;   /* 1px border on dark */
  --brand-hairline-acc: rgba(29,78,216,0.28); /* accent hairline */

  /* ---- Semantic STATUS (RESERVED — keep across all brands) -------------- */
  --st-good:        #2E7D5B;   --st-good-soft: #E4F0EA;
  --st-warning:     #C77D34;   --st-warning-soft: #F7ECDD;   /* not the brand accent */
  --st-bad:         #B23A3A;   --st-bad-soft: #F6E3E3;
  --st-info:        #3E6390;   --st-info-soft: #E5ECF4;

  /* ---- Typography primitives --------------------------------------------- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;        /* headlines / numbers-as-display */
  --font-ui:      "Instrument Sans", system-ui, sans-serif;              /* body / UI */
  --font-mono:    "Spline Sans Mono", ui-monospace, monospace;           /* data labels / kickers */

  /* ---- 2. SEMANTIC TOKENS — light theme (UI consumes THESE) ------------- */
  --canvas:          var(--brand-canvas);
  --surface:         var(--brand-bone);
  --surface-raised:  var(--brand-paper);
  --surface-sunken:  var(--brand-sunken);

  --ink:             var(--brand-ink-900);
  --ink-muted:       var(--brand-muted-600);
  --ink-subtle:      var(--brand-muted);
  --ink-inverse:     var(--brand-canvas);

  --accent:          var(--brand-accent);        /* cobalt is AA on the warm canvas */
  --accent-strong:   var(--brand-accent-deep);
  --accent-on:       var(--brand-canvas);        /* text on an accent fill */
  --accent-hairline: var(--brand-hairline-acc);

  --border:          var(--brand-hairline-lt);
  --border-strong:   #D2CEC2;

  --status-good:     var(--st-good);     --status-good-bg: var(--st-good-soft);
  --status-warn:     var(--st-warning);  --status-warn-bg: var(--st-warning-soft);
  --status-bad:      var(--st-bad);      --status-bad-bg:  var(--st-bad-soft);
  --status-info:     var(--st-info);     --status-info-bg: var(--st-info-soft);

  /* ---- Type scale (modular ~1.33 — civic headline energy) ---------------- */
  --text-display: 4rem;  --text-h1: 2.5rem; --text-h2: 1.75rem; --text-h3: 1.25rem;
  --text-body: 1.0625rem; --text-sm: 0.875rem; --text-xs: 0.75rem; --text-label: 0.6875rem;
  --text-metric: 3rem;
  --weight-reg: 400; --weight-med: 500; --weight-semi: 600; --weight-bold: 700;
  --leading-tight: 1.05; --leading-snug: 1.3; --leading-body: 1.65;
  --tracking-label: 0.14em; --tracking-tight: -0.02em;

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;

  /* ---- Radius / elevation / layout / motion ----------------------------- */
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(19,27,46,.05);
  --shadow-md: 0 6px 24px -12px rgba(19,27,46,.16);
  --max-content: 1200px; --gutter: var(--space-6);
  --ease: cubic-bezier(.2,.7,.2,1); --dur-fast: 120ms; --dur: 220ms;
}

/* ---- Dark theme --------------------------------------------------------- */
:root[data-theme="dark"], [data-theme="dark"] {
  --canvas:          var(--brand-ink-900);
  --surface:         var(--brand-ink-800);
  --surface-raised:  var(--brand-ink-700);
  --surface-sunken:  #0D1320;

  --ink:             var(--brand-canvas);
  --ink-muted:       #B8BDC9;
  --ink-subtle:      #8A91A1;
  --ink-inverse:     var(--brand-ink-900);

  --accent:          var(--brand-accent-light);   /* cobalt itself is too dark on navy */
  --accent-strong:   var(--brand-accent-lighter);
  --accent-on:       var(--brand-ink-900);
  --accent-hairline: rgba(109,143,240,0.32);

  --border:          var(--brand-hairline-dk);
  --border-strong:   #35446B;

  /* Status FOREGROUNDS unchanged; only re-tune soft backgrounds for dark */
  --status-good-bg: rgba(46,125,91,.16);
  --status-warn-bg: rgba(199,125,52,.16);
  --status-bad-bg:  rgba(178,58,58,.18);
  --status-info-bg: rgba(62,99,144,.18);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 10px 30px -12px rgba(0,0,0,.6);
}