/* ============================================================
   AI CALLER — DESIGN TOKENS
   Commercial, high-contrast, conversion-first.
   Dark authority surface + vivid amber signal for every action.
   ============================================================ */

:root {
  /* ---- Surfaces ---- */
  --paper:        #FFFFFF;
  --paper-soft:   #F7F6F3;
  --paper-dim:    #EFEDE8;
  --surface:      #FFFFFF;

  --ink:          #12100D;
  --ink-80:       rgba(18,16,13,0.80);
  --ink-70:       rgba(18,16,13,0.70);
  --ink-55:       rgba(18,16,13,0.62);
  --ink-40:       rgba(18,16,13,0.40);
  --ink-20:       rgba(18,16,13,0.20);
  --ink-12:       rgba(18,16,13,0.12);
  --ink-06:       rgba(18,16,13,0.06);

  /* ---- Dark authority surface ---- */
  --night:        #0B0A08;
  --night-2:      #141210;
  --night-3:      #1E1B17;
  --on-night:     #F6F3ED;
  --on-night-72:  rgba(246,243,237,0.72);
  --on-night-55:  rgba(246,243,237,0.60);
  --on-night-40:  rgba(246,243,237,0.40);
  --on-night-12:  rgba(246,243,237,0.13);

  /* ---- THE SIGNAL: amber. Every CTA, every highlight. ---- */
  --amber:        #E8821A;
  --amber-hot:    #FF9A2E;
  --amber-deep:   #A85B0C;   /* AA-safe on white */
  --amber-ink:    #7A4208;
  --amber-tint:   #FDF1E2;
  --amber-tint-2: #FAE3C8;
  --amber-a12:    rgba(232,130,26,0.12);
  --amber-a24:    rgba(232,130,26,0.24);
  --amber-a40:    rgba(232,130,26,0.40);

  /* ---- Support ---- */
  --teal:         #0E6B5C;
  --teal-tint:    #DCEFEB;
  --slate:        #5C6470;
  --slate-tint:   #EAECEF;

  /* ---- Action states ---- */
  --st-sim:       #5C6470;  --st-sim-t:  #EAECEF;
  --st-prep:      #20548C;  --st-prep-t: #DCE8F5;
  --st-wait:      #7C5209;  --st-wait-t: #F7E9CE;
  --st-exec:      #1F6B4A;  --st-exec-t: #DAEDE3;
  --st-fail:      #A5342A;  --st-fail-t: #F7E0DB;
  --st-esc:       #6B3FA0;  --st-esc-t:  #E9DEF4;

  /* ---- Type ---- */
  --font-display: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --t-hero:    clamp(2.7rem, 1.9rem + 3.6vw, 5.6rem);
  --t-d1:      clamp(2.1rem, 1.65rem + 2vw, 3.5rem);
  --t-d2:      clamp(1.6rem, 1.38rem + 1vw, 2.3rem);
  --t-h:       clamp(1.22rem, 1.14rem + 0.4vw, 1.5rem);
  --t-lede:    clamp(1.06rem, 1rem + 0.3vw, 1.25rem);
  --t-body:    1rem;
  --t-sm:      0.905rem;
  --t-label:   0.8rem;
  --t-micro:   0.72rem;

  --lh-hero: 1.02;
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  --ls-hero: -0.035em;
  --ls-tight: -0.02em;
  --ls-wide: 0.08em;
  --ls-wider: 0.15em;

  /* ---- Space ---- */
  --s-3xs: 0.25rem; --s-2xs: 0.5rem; --s-xs: 0.75rem; --s-s: 1rem;
  --s-m: 1.5rem; --s-l: 2.25rem; --s-xl: 3.5rem; --s-2xl: 5.5rem; --s-3xl: 8rem;

  /* ---- Layout ---- */
  --max: 1240px;
  --max-narrow: 760px;
  --pad: clamp(1.15rem, 4vw, 3rem);

  /* ---- Radius ---- */
  --r-s: 6px; --r-m: 10px; --r-l: 16px; --r-xl: 22px; --r-pill: 999px;

  /* ---- Shadow ---- */
  --sh-s: 0 1px 2px rgba(18,16,13,0.06);
  --sh-m: 0 8px 28px rgba(18,16,13,0.09);
  --sh-l: 0 24px 64px rgba(18,16,13,0.16);
  --sh-amber: 0 10px 34px rgba(232,130,26,0.28);
  --sh-glow: 0 0 80px rgba(232,130,26,0.22);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast: 150ms; --d-base: 320ms; --d-slow: 620ms;

  --z-nav: 100; --z-menu: 200; --z-toast: 300;
  --hdr-h: 80px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; }
}

/* Dark section scope */
.dark {
  --paper: var(--night);
  --paper-soft: var(--night-2);
  --paper-dim: var(--night-3);
  --surface: var(--night-2);
  --ink: var(--on-night);
  --ink-80: var(--on-night-72);
  --ink-70: var(--on-night-72);
  --ink-55: var(--on-night-55);
  --ink-40: var(--on-night-40);
  --ink-20: var(--on-night-12);
  --ink-12: var(--on-night-12);
  --ink-06: rgba(246,243,237,0.06);
  --amber-deep: var(--amber-hot);
  background: var(--night);
  color: var(--on-night);
}