/* ═══════════════════════════════════════════════════════════════
   cisot.dev — design tokens
   The only place a color, type size, space step, radius, shadow or duration is
   defined. Dark theme only. Components live in ui.css; pages use the classes
   there and never restate these values.
   ═══════════════════════════════════════════════════════════════ */

/* Self-hosted Geist (Vercel, SIL Open Font License — see /fonts/LICENSE-Geist.txt). Variable weight. */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ── Surfaces: three elevations ── */
  --bg: #0a0a0c;          /* page */
  --bg-card: #121215;     /* card */
  --bg-raised: #1a1a1f;   /* raised: hover, popovers, tiles */
  --hover: rgba(255, 255, 255, 0.05);   /* a hover wash on any surface */
  --pressed: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.08);        /* hairline */
  --border-strong: rgba(255, 255, 255, 0.14); /* hover / focus-adjacent */

  /* ── Text: three levels, all ≥ 4.5:1 on every surface ── */
  --text: #ededef;     /* primary   15.9:1 on card */
  --text-2: #a1a1aa;   /* secondary  7.3:1 */
  --text-3: #8a8a93;   /* muted      5.1:1 on raised */

  /* ── The one accent: cisot amber ── */
  --accent: #f0b43a;
  --accent-hover: #f6c25a;
  --accent-pressed: #e3a82e;
  --accent-ink: #1a1305;                        /* text on amber, 9.9:1 */
  --accent-tint: rgba(240, 180, 58, 0.12);      /* selected backgrounds */
  --accent-border: rgba(240, 180, 58, 0.35);
  --ring: 0 0 0 3px rgba(240, 180, 58, 0.3);    /* focus ring on fields */

  /* ── Status: only for real status ── */
  --success: #3fb950; --success-tint: rgba(63, 185, 80, 0.12);
  --warning: #f0883e; --warning-tint: rgba(240, 136, 62, 0.12);
  --danger: #f85149;  --danger-tint: rgba(248, 81, 73, 0.12); --danger-border: rgba(248, 81, 73, 0.35);
  --info: #58a6ff;    --info-tint: rgba(88, 166, 255, 0.12);

  /* ── Type ── */
  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* the scale: size / line-height */
  --fs-12: 12px; --lh-12: 16px;
  --fs-13: 13px; --lh-13: 18px;
  --fs-14: 14px; --lh-14: 20px;
  --fs-16: 16px; --lh-16: 24px;
  --fs-20: 20px; --lh-20: 28px;
  --fs-24: 24px; --lh-24: 32px;
  --fs-32: 32px; --lh-32: 40px;
  --fs-44: 44px; --lh-44: 52px;
  /* weights: 400 body, 500 labels and buttons, 600 headings — nothing else */

  /* ── Space: a 4px grid ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ── Shape ── */
  --r-xs: 4px;    /* tiny controls: checkbox, kbd, menu items */
  --r-sm: 6px;    /* buttons, fields, tags' tiles */
  --r-md: 10px;   /* cards, menus, toasts */
  --r-lg: 14px;   /* modals, large tiles */
  --r-full: 999px;

  /* ── Elevation ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.7);

  /* ── Motion ── */
  --dur: 140ms;
  --dur-slow: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ── Layout + control heights ── */
  --container: 1120px;
  --gutter: 24px;
  --header-h: 56px;
  --h-sm: 32px; --h-md: 36px; --h-lg: 40px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-slow: 0ms; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
}