/* ============================================================================
   APEX AIOS — DESIGN TOKENS  (the single source of design truth)
   ----------------------------------------------------------------------------
   Extracted verbatim from public/styles.css :root + the Scruples brand SVGs
   (scruples-logo.svg / scruples-mark.svg). The legacy ":root" vars in
   styles.css remain valid; THIS file restates them as a named, documented
   token scale so the v2 component lib + views consume one vocabulary.

   Provenance map (token  ←  origin):
     --c-brand / --c-brand-2 / --c-brand-deep   ← styles.css --bg / --bg-2 + SVG #2A5240/#1F3D2B/#15281D forest gradient
     --c-gold  / --c-gold-2  / --c-gold-deep    ← styles.css --teal/--teal-2/--teal-deep  ← SVG #C2A36B..#A8884C / #D8BE8C gold gradient
     --c-paper / --c-paper-2 / --c-cream*       ← styles.css --paper / --paper-2 / --cream / --cream-2
     --c-line*                                  ← styles.css --line / --line-soft
     --c-text / --c-muted*                      ← styles.css --text / --muted / --muted-2
     --c-pos/neg/warn/info                      ← styles.css --pos/--neg/--warn/--info
     --shadow-*                                 ← styles.css --shadow-sm/--shadow/--shadow-lg
     --radius-*                                 ← styles.css --r-sm/--r/--r-lg
     --font-serif / --font-sans                 ← styles.css --serif/--sans (Fraunces display / Inter body — same as SVG)
   The brand is a deep forest-green + gold "salon" palette (NOT the header
   comment's stale "slate + teal" wording — the actual values are green/gold).
   ============================================================================ */

:root {
  /* ---- Brand: forest green (primary surface / nav-active / system strips) ---- */
  --c-brand:       #1F3D2B;   /* --bg      */
  --c-brand-2:     #2A5240;   /* --bg-2    */
  --c-brand-deep:  #15281D;   /* SVG forest gradient terminus */
  --c-ink:         #1F3D2B;
  --c-ink-soft:    #1B2638;

  /* ---- Gold (accent / CTA / KPI accent rail / chart highlight) ----
     These three ARE the dashboard accent. For per-niche demo tenants, app.js
     overrides them at runtime from the NichePack accentColor (color-mix ramp),
     so every component that references --c-gold* rethemes itself with zero CSS
     churn — HVAC renders orange, Health renders cyan, Scruples stays gold. */
  --c-gold:        #C2A36B;   /* --teal      (misnamed in legacy css; it is gold) */
  --c-gold-2:      #D8BE8C;   /* --teal-2 / SVG gold gradient start */
  --c-gold-deep:   #A8884C;   /* --teal-deep / SVG gold gradient end */
  /* Semantic aliases (prefer --c-accent* in new code; resolve to the gold ramp). */
  --c-accent:      var(--c-gold);
  --c-accent-2:    var(--c-gold-2);
  --c-accent-deep: var(--c-gold-deep);

  /* ---- Paper / neutral surfaces ---- */
  --c-paper:       #FFFFFF;   /* --paper   */
  --c-paper-2:     #F5F7FA;   /* --paper-2 */
  --c-cream:       #F8FAFB;   /* --cream   (app bg) */
  --c-cream-2:     #EEF2F6;   /* --cream-2 (hover fill) */

  /* ---- Lines ---- */
  --c-line:        #E2E8F0;   /* --line      */
  --c-line-soft:   #EEF2F6;   /* --line-soft */

  /* ---- Text ---- */
  --c-text:        #0F172A;   /* --text    */
  --c-muted:       #64748B;   /* --muted   */
  --c-muted-2:     #94A3B8;   /* --muted-2 */

  /* ---- Semantic status ---- */
  --c-pos:         #16A34A;   /* --pos  */
  --c-neg:         #DC2626;   /* --neg  */
  --c-warn:        #D97706;   /* --warn */
  --c-info:        #2563EB;   /* --info */

  /* ---- Spacing scale (4px base; matches the 6/8/10/14/18/20/28 rhythm in styles.css) ---- */
  --space-0:   0;
  --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-10:  40px;
  --space-12:  48px;

  /* ---- Type scale (px values lifted from styles.css component sizes) ---- */
  --fs-2xs:    10.5px;
  --fs-xs:     11.5px;
  --fs-sm:     12.5px;
  --fs-base:   14.5px;   /* body */
  --fs-md:     16.5px;
  --fs-lg:     19px;
  --fs-xl:     22px;
  --fs-2xl:    26px;
  --fs-3xl:    30px;     /* kpi value */
  --fs-4xl:    44px;     /* hero / money counter */

  --lh-tight:  1.06;
  --lh-snug:   1.3;
  --lh-base:   1.5;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---- Radii ---- */
  --radius-sm:   10px;   /* --r-sm */
  --radius:      14px;   /* --r    */
  --radius-lg:   20px;   /* --r-lg */
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06);
  --shadow:     0 4px 14px rgba(15,23,42,.07),0 2px 6px rgba(15,23,42,.05);
  --shadow-lg:  0 18px 50px rgba(11,18,32,.20),0 6px 18px rgba(15,23,42,.10);
  --shadow-gold:0 6px 18px rgba(194,163,107,.40);
  --glow-hero:  0 0 0 1px rgba(206,168,86,.22), 0 18px 60px -20px rgba(206,168,86,.45);

  /* ---- Motion ---- */
  --ease:        cubic-bezier(.2,.7,.2,1);
  --ease-out:    cubic-bezier(.2,.8,.2,1);
  --dur-fast:    .15s;
  --dur:         .2s;
  --dur-slow:    .4s;
  --dur-count:   .9s;       /* money-counter / bar grow */

  /* ---- Fonts ---- */
  --font-serif: "Fraunces",Georgia,"Times New Roman",serif;
  --font-sans:  "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* ---- Layout (carried for shell parity) ---- */
  --layout-sidebar: 268px;
  --layout-topbar:  68px;
  --z-toast:   80;
  --z-palette: 90;

  /* ---- Aliases back to legacy names so existing styles.css selectors keep
          working if the cascade ever resolves a v2 token first. ---- */
  --bg: var(--c-brand); --bg-2: var(--c-brand-2);
  --teal: var(--c-gold); --teal-2: var(--c-gold-2); --teal-deep: var(--c-gold-deep);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast:.001s; --dur:.001s; --dur-slow:.001s; --dur-count:.001s; }
}