/*
 * Dotz design tokens + typography. Build-order item 1 (PRODUCT-DESIGN-PLAN-2026.md section 7).
 * Loaded before dotz.css and shell.css. Legacy --dotz-* variables in dotz.css stay valid;
 * new work must use these tokens.
 */

:root {
  /* Core dark (default) */
  --dotz-bg-canvas: #101216;
  --dotz-bg-surface: #171a1f;
  --dotz-bg-elevated: #20242b;
  --dotz-text-primary: #f7f8f8;
  --dotz-text-secondary: #b6bbc2;
  --dotz-text-muted: #858c95;
  --dotz-border-subtle: #343a43;
  --dotz-focus-ring: #7cc7ff;

  /* Semantic */
  --dotz-success: #00a85a;
  --dotz-warning: #b76a00;
  --dotz-danger: #d92d38;
  --dotz-info: #1a56ff;

  /* Typography */
  --dotz-font-display: "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --dotz-font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --dotz-type-display-xl: clamp(3.5rem, 9vw, 7.5rem);
  --dotz-type-display-lg: clamp(2.75rem, 6vw, 5rem);
  --dotz-type-h1: clamp(2rem, 4vw, 3.5rem);
  --dotz-type-h2: clamp(1.5rem, 2.5vw, 2.25rem);
  --dotz-type-h3: 1.25rem;
  --dotz-type-body-lg: 1.125rem;
  --dotz-type-body: 1rem;
  --dotz-type-small: 0.875rem;
  --dotz-type-label: 0.75rem;

  --dotz-leading-display-xl: 0.86;
  --dotz-leading-display-lg: 0.92;
  --dotz-leading-h1: 1.0;
  --dotz-leading-h2: 1.1;
  --dotz-leading-h3: 1.2;
  --dotz-leading-body: 1.6;
  --dotz-leading-small: 1.45;
  --dotz-leading-label: 1.3;

  /* Spacing scale, base unit 4px */
  --dotz-space-1: 4px;
  --dotz-space-2: 8px;
  --dotz-space-3: 12px;
  --dotz-space-4: 16px;
  --dotz-space-5: 24px;
  --dotz-space-6: 32px;
  --dotz-space-7: 48px;
  --dotz-space-8: 64px;
  --dotz-space-9: 96px;

  /* Layout */
  --dotz-width-content: 1180px;
  --dotz-width-reading: 760px;
  --dotz-width-form: 640px;
  --dotz-gutter: 32px;

  /* Radius */
  --dotz-radius-sm: 6px;
  --dotz-radius-md: 10px;
  --dotz-radius-lg: 16px;
  --dotz-radius-pill: 999px;

  /* Motion */
  --dotz-duration: 200ms;
  --dotz-duration-panel: 320ms;
  --dotz-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

/* Light theme tokens. Applied by explicit user choice (html[data-dotz-theme=light],
   kept in sync with legacy body.dotz-light) or by system preference when no choice stored. */
html[data-dotz-theme="light"],
body.dotz-light {
  --dotz-bg-canvas: #f2f4f4;
  --dotz-bg-surface: #ffffff;
  --dotz-bg-elevated: #e7ebeb;
  --dotz-text-primary: #111418;
  --dotz-text-secondary: #4d565e;
  --dotz-text-muted: #68737d;
  --dotz-border-subtle: #c8cfd1;
  --dotz-focus-ring: #005fcc;
  color-scheme: light;
}

@media (max-width: 639px) {
  :root {
    --dotz-gutter: 16px;
  }
}

/* ── Base typography ─────────────────────────────────────────────── */

body {
  font-family: var(--dotz-font-body);
  font-size: var(--dotz-type-body);
  line-height: var(--dotz-leading-body);
}

.dotz-type-display-xl {
  font-family: var(--dotz-font-display);
  font-size: var(--dotz-type-display-xl);
  line-height: var(--dotz-leading-display-xl);
  letter-spacing: -0.02em;
  font-weight: 700;
}

.dotz-type-display-lg {
  font-family: var(--dotz-font-display);
  font-size: var(--dotz-type-display-lg);
  line-height: var(--dotz-leading-display-lg);
  letter-spacing: -0.02em;
  font-weight: 700;
}

.dotz-prose h1,
.dotz-type-h1 {
  font-family: var(--dotz-font-display);
  font-size: var(--dotz-type-h1);
  line-height: var(--dotz-leading-h1);
  letter-spacing: -0.015em;
  font-weight: 700;
}

.dotz-prose h2,
.dotz-type-h2 {
  font-family: var(--dotz-font-display);
  font-size: var(--dotz-type-h2);
  line-height: var(--dotz-leading-h2);
  letter-spacing: -0.01em;
  font-weight: 650;
}

.dotz-prose h3,
.dotz-type-h3 {
  font-family: var(--dotz-font-display);
  font-size: var(--dotz-type-h3);
  line-height: var(--dotz-leading-h3);
  font-weight: 600;
}

.dotz-type-body-lg {
  font-size: var(--dotz-type-body-lg);
  line-height: var(--dotz-leading-body);
}

.dotz-type-small {
  font-size: var(--dotz-type-small);
  line-height: var(--dotz-leading-small);
}

/* Uppercase labels: short metadata only, never below 12px */
.dotz-type-label {
  font-size: var(--dotz-type-label);
  line-height: var(--dotz-leading-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.dotz-prose {
  max-width: var(--dotz-width-reading);
}

.dotz-prose p,
.dotz-prose ul,
.dotz-prose ol {
  max-width: 75ch;
}

/* ── Shared focus treatment ──────────────────────────────────────── */

.dotz-shell :focus-visible {
  outline: 2px solid var(--dotz-focus-ring);
  outline-offset: 2px;
  border-radius: var(--dotz-radius-sm);
}

/* ── Reduced motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dotz-duration: 0ms;
    --dotz-duration-panel: 0ms;
  }

  .dotz-shell *,
  .dotz-shell *::before,
  .dotz-shell *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}