/*
 * Doku Systems — Design Tokens
 * See DESIGN.md for the rationale behind every value.
 * Never hardcode hex values, font names, or spacing in component CSS — reach for these.
 */

:root {
  /* ──────────────────────────────────────────────────────────────
   * Color · Surface — near-black with subtle eggplant bias
   * ────────────────────────────────────────────────────────────── */
  --color-bg:           #0a0714;
  --color-bg-elev:      #15102a;
  --color-bg-deep:      #050309;

  /* ──────────────────────────────────────────────────────────────
   * Color · Text
   * ────────────────────────────────────────────────────────────── */
  --color-text:         #f4ecd8;
  --color-text-dim:     #a89dc8;
  --color-text-faint:   #6d5f8a;

  /* ──────────────────────────────────────────────────────────────
   * Color · Accents (use one per composition unit)
   * ────────────────────────────────────────────────────────────── */
  --color-magenta:      #ff2e88;
  --color-magenta-deep: #d61a6a;
  --color-lime:         #c8ff00;
  --color-lime-deep:    #a0cc00;
  --color-cyan:         #00e5ff;
  --color-cyan-deep:    #00b8cc;
  --color-orange:       #ff7a1a;
  --color-yellow:       #ffd60a;

  /* ──────────────────────────────────────────────────────────────
   * Color · Functional
   * ────────────────────────────────────────────────────────────── */
  --color-border:       #ffffff;
  --color-border-dim:   #463a6b;
  --color-link:         var(--color-cyan);
  --color-link-hover:   var(--color-magenta);

  /* ──────────────────────────────────────────────────────────────
   * Typography
   * ────────────────────────────────────────────────────────────── */
  --font-display: "Archivo Black", "Impact", "Helvetica Neue", system-ui, sans-serif;
  --font-pixel:   "VT323", "Courier New", ui-monospace, monospace;
  --font-mono:    "Space Mono", "Menlo", ui-monospace, monospace;

  /* Type scale */
  --text-meta:        0.875rem;  /* 14px — VT323 needs more pixels to be legible */
  --text-sm:          0.9375rem; /* 15px */
  --text-base:        1rem;      /* 16px */
  --text-lg:          1.125rem;  /* 18px */
  --text-xl:          1.5rem;    /* 24px */
  --text-2xl:         2rem;      /* 32px */
  --text-3xl:         3rem;      /* 48px */
  --text-display-sm:  4.5rem;    /* 72px */
  --text-display:     clamp(4.5rem, 12vw, 9rem);    /*  72px → 144px */
  --text-display-lg:  clamp(6rem, 18vw, 14rem);     /*  96px → 224px */

  /* Weight */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Line height — tuned for Archivo Black (denser, taller than rounded displays) */
  --lh-display: 0.92;
  --lh-snug:    1.1;
  --lh-base:    1.55;
  --lh-loose:   1.75;

  /* Tracking — Archivo Black wants tighter spacing at large sizes */
  --tracking-display: -0.035em;
  --tracking-tight:   -0.015em;
  --tracking-base:    0;
  --tracking-meta:    0.12em;  /* uppercase VT323 labels */
  --tracking-mono:    0.02em;

  /* ──────────────────────────────────────────────────────────────
   * Space — 8pt grid + 4pt micro
   * ────────────────────────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;   /*   4px */
  --space-2:  0.5rem;    /*   8px */
  --space-3:  0.75rem;   /*  12px */
  --space-4:  1rem;      /*  16px */
  --space-5:  1.25rem;   /*  20px */
  --space-6:  1.5rem;    /*  24px */
  --space-8:  2rem;      /*  32px */
  --space-10: 2.5rem;    /*  40px */
  --space-12: 3rem;      /*  48px */
  --space-16: 4rem;      /*  64px */
  --space-20: 5rem;      /*  80px */
  --space-24: 6rem;      /*  96px */
  --space-32: 8rem;      /* 128px */
  --space-40: 10rem;     /* 160px */

  /* ──────────────────────────────────────────────────────────────
   * Borders
   * ────────────────────────────────────────────────────────────── */
  --border-1:     2px;
  --border-2:     3px;
  --border-3:     4px;
  --border-thick: 6px;

  /* ──────────────────────────────────────────────────────────────
   * Radius — sharp, sticker, or pill. Nothing in between.
   * ────────────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-pill: 9999px;

  /* ──────────────────────────────────────────────────────────────
   * Hard offset shadows — no blur, ever
   * ────────────────────────────────────────────────────────────── */
  --shadow-sticker:         4px 4px 0 0 var(--color-border);
  --shadow-sticker-lime:    4px 4px 0 0 var(--color-lime);
  --shadow-sticker-magenta: 4px 4px 0 0 var(--color-magenta);
  --shadow-sticker-cyan:    4px 4px 0 0 var(--color-cyan);
  --shadow-sticker-orange:  4px 4px 0 0 var(--color-orange);
  --shadow-sticker-deep:    8px 8px 0 0 var(--color-magenta);
  --shadow-press:           2px 2px 0 0 var(--color-border);
  --shadow-lift:            6px 6px 0 0 var(--color-lime);

  /* ──────────────────────────────────────────────────────────────
   * Layout
   * ────────────────────────────────────────────────────────────── */
  --max-w-prose: 64ch;
  --max-w-page:  1320px;
  --gutter:      var(--space-6);

  /* ──────────────────────────────────────────────────────────────
   * Motion
   * ────────────────────────────────────────────────────────────── */
  --dur-fast:    100ms;
  --dur-base:    200ms;
  --dur-slow:    400ms;
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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