/* cmo-design token set. The ONE place a colour, face or radius is typed.
   Swap your brand in by editing the accent ramp and the fonts below; every
   exemplar and component reads these names, and scripts/design_review.py reads
   this file as the allowed colour set (pass --tokens <your.css> to use your own).

   Three skins, one per artifact, never mixed:
     --gl-*    dark: apps, dashboards, reports, motion pieces (default)
     --paper-* light editorial: print-safe one-offs only
     --lp-*    landing: open-web Persuade pages (may be light, carries the brand)  */
:root {
  /* dark skin: flat near-black, no glow, no gradient, no glass */
  --gl-bg:        #09090d;
  --gl-surface:   #0e0e13;
  --gl-surface-2: #121218;
  --gl-hover:     rgba(255,255,255,0.04);
  --gl-rule:          rgba(255,255,255,0.07);
  --gl-border:        rgba(255,255,255,0.10);
  --gl-border-strong: rgba(255,255,255,0.16);
  --gl-text:   #ffffff;              /* figures, headings */
  --gl-text-2: rgba(255,255,255,0.80);
  --gl-muted:  rgba(255,255,255,0.66); /* secondary text */
  --gl-faint:  rgba(255,255,255,0.42); /* axes and ticks only */
  --gl-radius: 10px;

  /* the accent: ONE hue. Swap these for your brand. */
  --gl-accent:       #a855f7;
  --gl-accent-deep:  #7c3aed;
  --gl-accent-light: #c084fc;
  --gl-accent-bg:    rgba(168,85,247,0.16);

  /* data series: shades of the one accent, then grey for everything else */
  --gl-series-1: #a855f7;
  --gl-series-2: #d8b4fe;
  --gl-series-3: #6d3bb0;
  --gl-series-4: #f0e2ff;
  --gl-series-5: #4c2a78;
  --gl-series-6: #b57cf6;
  --gl-other:    #6b7280;
  --gl-ref:      #8b84a8;   /* dotted reference line, never a series */
  --gl-compare:  #3b82f6;   /* the one comparison colour */

  /* state only: never decoration, never a series */
  --sem-pass: #34d399;
  --sem-warn: #fbbf24;
  --sem-fail: #f87171;
  /* the one secondary hue: illustration and "the subject" in motion pieces */
  --accent-2:      #fb923c;
  --accent-2-deep: #c2410c;

  /* magnitude ramp: red through the accent to blue; ink picked by luminance */
  --spec-floor: #dc2626;
  --spec-mid:   #a855f7;
  --spec-ceil:  #3b82f6;
  /* bright tone ends for heat cells and deltas on dark */
  --tone-low:  #60a5fa;
  --tone-high: #ef4444;

  /* light editorial skin */
  --paper-bg:     #f4f1ea;
  --paper-2:      #ebe7dd;
  --paper-rule:   #d8d3c6;
  --paper-border: #2a2724;
  --paper-ink:    #0a0a0a;
  --paper-muted:  #5a564f;
  --paper-pass: #16a34a;
  --paper-warn: #b45309;
  --paper-fail: #b91c1c;

  /* landing skin: the accent and its tint ramp over accent-leaning neutrals */
  --lp-900: #3b0764;
  --lp-800: #6b21a8;
  --lp-700: #7e22ce;   /* white text sits on 700 or deeper (4.5:1+) */
  --lp-600: #9333ea;
  --lp-500: #a855f7;   /* never under white body text: 4.0:1 */
  --lp-400: #c084fc;
  --lp-300: #d8b4fe;
  --lp-200: #e9d5ff;
  --lp-100: #f3e8ff;
  --lp-50:  #faf5ff;
  --lp-ink: #0d1321;
  --lp-green: #15803d; /* the one illustration secondary */

  /* platform replicas: ad and placement previews copy the platform's own chrome,
     never the brand. Legal only inside a replica screen (dash-adp-screen, pp-replica). */
  --replica-fb-blue: #1877f2;
  --replica-ig-blue: #0095f6;
  --replica-grey:    #65676b;
  --replica-rule:    #dbdbdb;
  --replica-like:    #f33e58;
  --replica-serp:    #202124;

  /* type: one superfamily + one mono. Landing may carry the brand face. */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-landing: "Inter Tight", system-ui, sans-serif;

  /* motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-feedback: 180ms;   /* 150 to 300ms */
  --t-reveal:   800ms;   /* 700 to 1000ms, landing and motion only */
  --stagger:    55ms;    /* per word; 270ms max across siblings */

  /* space: 4px scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
}
/* KoKo brand override: the requested black and white identity. */
:root {
 --kk-bg:#090909; --kk-surface:#141414; --kk-surface-raised:#202020;
 --kk-ink:#f5f5f3; --kk-muted:#b5b5b0; --kk-faint:#969691; --kk-line:#393936;
 --kk-white:#ffffff; --kk-black:#000000; --kk-error:#fca5a5;
 --kk-scrim:rgba(0,0,0,.54); --kk-overlay:rgba(0,0,0,.76);
 --font-sans:'DM Sans',sans-serif; --font-landing:'DM Sans',sans-serif;
 --font-editorial:'DM Serif Display',serif;
 --ease-out:cubic-bezier(.16,1,.3,1);
 --page-gutter:clamp(24px,4.45vw,80px);
}

/* Revised black-room palette */
:root{--kk-bg:#000000;--kk-surface:#080808;--kk-surface-raised:#161616;--kk-ink:#ffffff;--kk-muted:#aeaeae;--kk-faint:#909090;--kk-line:#292929;--font-editorial:'DM Sans',sans-serif}