/* =========================================================================
   tokens.css — design tokens (colors, type, space, radii, shadows, motion)
   ========================================================================= */

:root {
  /* color */
  --ink:       #0B0B10;
  --ink-2:     #1A1B22;
  --ink-3:     #3A3C46;
  --paper:     #F6F5F1;
  --paper-2:   #FFFFFF;
  --paper-3:   #ECEAE2;
  --line:      #E6E2D6;
  --line-2:    #D7D2C2;
  --accent:    #1C69D4;        /* BMW-style blue */
  --accent-2:  #FF6F00;        /* signal orange */
  --accent-3:  #0F4A99;        /* deep blue */
  --gold:      #C9A24B;
  --mint:      #6FB07F;
  --danger:    #C0392B;
  --success:   #2E8B57;
  --tint-blue:  rgba(28,105,212,0.08);
  --tint-gold:  rgba(201,162,75,0.12);
  --grad-1:    linear-gradient(135deg, #0B0B10 0%, #1A1B22 60%, #0F4A99 100%);
  --grad-2:    linear-gradient(135deg, #1C69D4 0%, #0F4A99 100%);
  --grad-3:    linear-gradient(135deg, #FF6F00 0%, #C9A24B 100%);
  --grad-mesh: radial-gradient(at 12% 20%, #1C69D4 0%, transparent 45%),
               radial-gradient(at 88% 10%, #FF6F00 0%, transparent 35%),
               radial-gradient(at 70% 80%, #C9A24B 0%, transparent 35%),
               linear-gradient(180deg, #0B0B10 0%, #1A1B22 100%);

  /* typography */
  --font-sans: "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI",
               Roboto, "Noto Sans", sans-serif;
  --font-display: "Times New Roman", "Playfair Display", Georgia, "Source Han Serif SC",
                  "Noto Serif CJK SC", serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-100: 0.75rem;     /* 12 */
  --fs-200: 0.875rem;    /* 14 */
  --fs-300: 1rem;        /* 16 */
  --fs-400: 1.125rem;    /* 18 */
  --fs-500: 1.25rem;     /* 20 */
  --fs-600: 1.5rem;      /* 24 */
  --fs-700: 1.875rem;    /* 30 */
  --fs-800: 2.25rem;     /* 36 */
  --fs-900: 3rem;        /* 48 */
  --fs-1000: 3.75rem;    /* 60 */
  --fs-1100: 4.5rem;     /* 72 */
  --fs-1200: 6rem;       /* 96 */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.6;

  --tracking-tight: -0.02em;
  --tracking-base:  0;
  --tracking-wide:  0.08em;
  --tracking-mega:  0.18em;

  /* spacing (4-pt scale) */
  --s-0:  0;
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.5rem;
  --s-8:  3rem;
  --s-9:  4rem;
  --s-10: 5rem;
  --s-11: 6rem;
  --s-12: 8rem;
  --s-13: 10rem;

  /* radii */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 22px;
  --r-5: 32px;
  --r-pill: 999px;

  /* shadow */
  --shadow-1: 0 1px 2px rgba(11,11,16,0.06), 0 1px 3px rgba(11,11,16,0.06);
  --shadow-2: 0 4px 12px rgba(11,11,16,0.08), 0 2px 6px rgba(11,11,16,0.06);
  --shadow-3: 0 14px 32px rgba(11,11,16,0.12), 0 6px 14px rgba(11,11,16,0.08);
  --shadow-4: 0 30px 60px rgba(11,11,16,0.18), 0 12px 24px rgba(11,11,16,0.10);
  --shadow-glow: 0 0 0 1px rgba(28,105,212,0.30), 0 0 32px rgba(28,105,212,0.25);

  /* layout */
  --container: 1280px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 76px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --d-1: 160ms;
  --d-2: 240ms;
  --d-3: 400ms;
  --d-4: 700ms;
  --d-5: 1200ms;

  /* z-layers */
  --z-base: 1;
  --z-content: 10;
  --z-header: 50;
  --z-overlay: 80;
  --z-modal: 90;
  --z-toast: 100;
}