/* =========================================================================
 * tokens.css — Design Tokens (single source of truth for color/type/motion)
 * JOICE.AI CO., LIMITED — joicettech.com
 * Source: docs/ui/design-tokens.md
 * ========================================================================= */

:root {
  /* Surfaces */
  --c-ink: #0B0B0F;
  --c-pearl: #F4F4F1;
  --c-graphite: #181820;
  --c-bone: #E8E8E3;
  --c-smoke: #9A9AA2;
  --c-mist: #6E6E76;
  --c-cadillac: #1C69D4;
  --c-cadillac-hover: #2A7BE5;
  --c-champagne: #D4AF37;
  --c-coral: #FF6B5B;
  --c-amber-100: #FFF1D6;
  --c-coral-soft: #FFE3DE;

  /* Semantic */
  --bg-page: var(--c-ink);
  --bg-page-alt: var(--c-pearl);
  --bg-card: var(--c-graphite);
  --bg-card-light: #FFFFFF;
  --bg-overlay: rgba(11, 11, 15, 0.72);
  --text-default: var(--c-pearl);
  --text-muted: var(--c-smoke);
  --text-eyebrow: var(--c-champagne);
  --accent-primary: var(--c-cadillac);
  --accent-premium: var(--c-champagne);
  --accent-playful: var(--c-coral);
  --border-hairline: rgba(244, 244, 241, 0.12);
  --border-hairline-light: rgba(11, 11, 15, 0.10);

  /* Mascot palette */
  --mascot-fur: #181820;
  --mascot-fur-2: #2C2C36;
  --mascot-belly: #F4F4F1;
  --mascot-blush: #FF6B5B;
  --mascot-eye: #0B0B0F;
  --mascot-shine: #FFFFFF;
  --mascot-gold: #D4AF37;

  /* Type stack */
  --font-display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Type scale (mobile / desktop) — clamp() gives responsive */
  --t-d2xl: clamp(64px, 9vw, 144px);   /* Hero display */
  --t-dxl:  clamp(48px, 6.5vw, 96px);
  --t-dl:   clamp(40px, 5vw, 72px);
  --t-dm:   clamp(32px, 4vw, 56px);
  --t-ds:   clamp(24px, 3vw, 40px);
  --t-h:    clamp(20px, 2.2vw, 28px);
  --t-sh:   18px;
  --t-bl:   16px;
  --t-body: 15px;
  --t-caption: 12px;

  /* Line heights */
  --lh-tight: 1.04;
  --lh-snug: 1.16;
  --lh-normal: 1.5;
  --lh-loose: 1.72;

  /* Tracking */
  --tr-tight: -0.035em;
  --tr-normal: -0.01em;
  --tr-wide: 0.04em;
  --tr-x-wide: 0.18em;

  /* Spacing (8-pt grid + half-steps for fine adjustments) */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --s-40: 160px;
  --s-48: 192px;
  --s-64: 256px;

  /* Section rhythm */
  --section-pad-y: clamp(64px, 8vw, 160px);
  --gutter-x: clamp(20px, 4vw, 56px);
  --container-max: 1440px;

  /* Radii */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 16px;
  --r-5: 24px;
  --r-pill: 9999px;

  /* Shadows */
  --sh-0: none;
  --sh-1: 0 1px 2px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.24);
  --sh-2: 0 4px 12px rgba(0,0,0,.22), 0 24px 48px rgba(0,0,0,.32);
  --sh-3: 0 32px 64px rgba(0,0,0,.40);
  --sh-gold: 0 0 60px rgba(212,175,55,.22);
  --sh-blue: 0 0 60px rgba(28,105,212,.30);
  --sh-coral: 0 0 48px rgba(255,107,91,.28);

  /* Borders */
  --bw-hairline: 1px;
  --bw-rule: 2px;

  /* Motion timings */
  --t-fast: 200ms;
  --t-base: 420ms;
  --t-slow: 720ms;
  --t-cine: 1200ms;
  --t-marquee: 32s;

  /* Easings */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-in: cubic-bezier(0.55, 0, 0.68, 0.53);
  --e-inout: cubic-bezier(0.83, 0, 0.17, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --e-linear: linear;

  /* Layout */
  --z-base: 0;
  --z-raised: 10;
  --z-overlay: 100;
  --z-nav: 200;
  --z-modal: 500;
  --z-toast: 800;

  /* Misc */
  --blur-soft: 12px;
  --ring-focus: 0 0 0 3px rgba(28,105,212,.55);
}