/* =============================================================================
   AIO ERP — BRAND TOKENS (single source of truth)
   -----------------------------------------------------------------------------
   Part of the AIO Nexus family design system. AIO ERP = the navy node.
   LOAD THIS FIRST in the cascade, before bundle-foundation.css and all themes.
   Everything downstream consumes these via var(--brand-*).

   Sections:
     1. Brand primitives        — raw palette, never used directly in components
     2. Compatibility shims      — bridge legacy --nx-* / --gold during migration
     3. Module → product colors  — KPI tiles, sidebar glyphs, charts
   Spec: docs/brand-theme/SPEC.md §2
   ============================================================================= */

/* ── 1. BRAND PRIMITIVES ──────────────────────────────────────────────────── */
:root {
  /* Core */
  --brand-ink:        #0A1733;
  --brand-ink-2:      #142849;
  --brand-navy:       #1E3A6F;
  --brand-navy-soft:  #2C4F8A;
  --brand-navy-light: #EEF2F9;
  --brand-gold:       #D4A24C;
  --brand-gold-2:     #B8862E;
  --brand-gold-light: #FAF3E2;
  --brand-blue:       #147CBB;

  /* Product / status hues */
  --brand-teal:        #0F766E;
  --brand-teal-light:  #E6F4F2;
  --brand-green:       #15803D;
  --brand-green-light: #E8F5EC;
  --brand-violet:      #6D28D9;
  --brand-violet-light:#F1ECFB;
  --brand-red:         #DC2626;
  --brand-red-light:   #FCEDED;
  --brand-wa:          #25D366;

  /* Neutrals + text scale */
  --brand-surface: #F6F8FB;
  --brand-paper:   #FCFCFD;
  --brand-line:    #E5E9F0;
  --brand-line-2:  #D5DBE5;
  --brand-t1:      #0A1733;
  --brand-t2:      #3D4D6B;
  --brand-t3:      #7A8AA6;
  --brand-t4:      #A8B3C6;

  /* Type — Inter for UI, JetBrains Mono for code/currency codes. No italic. */
  --brand-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Display font — used for headings, KPIs, hero text. Defaults to sans (no display font). */
  --brand-font-display: var(--brand-font-sans);

  /* Semantic type scale — role-based aliases. Components should use these, not raw --font-size-*. */
  /* Headings use fluid clamp() so they scale gracefully from mobile → desktop. */
  --type-display:  clamp(1.75rem, 3vw + 1rem, 2.25rem);   /* 28px → 36px */
  --type-headline: clamp(1.5rem, 2.5vw + 0.75rem, 1.875rem); /* 24px → 30px */
  --type-title:    clamp(1.25rem, 2vw + 0.5rem, 1.5rem);    /* 20px → 24px */
  --type-subhead:  clamp(1.1rem, 1.5vw + 0.5rem, 1.25rem);  /* 17.6px → 20px */
  --type-body:     1rem;      /* 16px — fixed, body text shouldn't scale with viewport */
  --type-small:    0.875rem;  /* 14px — fixed */
  --type-caption:  0.75rem;   /* 12px — fixed */

  /* Semantic leading scale — role-based line-height aliases */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-body:    1.6;
  --leading-relaxed: 1.75;

  /* Radius / shadow / motion */
  --brand-r-sm:   8px;
  --brand-r:      14px;
  --brand-r-lg:   22px;
  --brand-r-full: 9999px;
  --brand-shadow-sm: 0 1px 2px rgba(10,23,51,.04), 0 1px 6px rgba(10,23,51,.06);
  --brand-shadow:    0 4px 10px rgba(10,23,51,.06), 0 12px 24px rgba(10,23,51,.08);
  --brand-shadow-lg: 0 18px 40px rgba(10,23,51,.12), 0 4px 12px rgba(10,23,51,.06);
  --brand-shadow-gold: 0 8px 24px rgba(212,162,76,.35);
  --brand-ease: cubic-bezier(.4, 0, .2, 1);
  --brand-dur-fast: 150ms;
  --brand-dur:      250ms;
  --brand-dur-slow: 400ms;

  /* Universal accent thread — constant across every theme */
  --brand-focus-ring: rgba(212, 162, 76, .40);
}

/* ── 2. COMPATIBILITY SHIMS ───────────────────────────────────────────────────
   Keep existing pages working while callers migrate to --brand-*.
   Removed in PR-7 once nothing references these directly. */
:root {
  --nx-ink:      var(--brand-ink);
  --nx-ink-2:    var(--brand-ink-2);
  --nx-navy:     var(--brand-navy);
  --nx-navy-soft:var(--brand-navy-soft);
  --nx-gold:     var(--brand-gold);
  --nx-gold-dark:var(--brand-gold-2);
  --nx-surface:  var(--brand-surface);
  --nx-paper:    var(--brand-paper);
  --nx-border:   var(--brand-line);
  --nx-shadow:   var(--brand-shadow-lg);
  --nx-r:        var(--brand-r);
  --nx-r-sm:     var(--brand-r-sm);

  /* Legacy theme-layer alias used widely today */
  --gold: var(--brand-gold);
}

/* ── 3. MODULE → PRODUCT COLOR MAP ────────────────────────────────────────────
   Drives KPI tiles, sidebar module glyphs, and chart series per module. */
:root {
  --mod-erp:        var(--brand-navy);
  --mod-remit:      var(--brand-gold);
  --mod-market:     var(--brand-teal);
  --mod-crm:        var(--brand-green);
  --mod-accounting: var(--brand-violet);
  --mod-tax:        var(--brand-red);
  --mod-legal:      var(--brand-teal);
  --mod-marketing:  var(--brand-gold-2);
  --mod-dev:        var(--brand-navy);
  --mod-hosting:    var(--brand-green);
  --mod-wa-api:     var(--brand-wa);
  --mod-loc-api:    var(--brand-red);
}