/* Dawn · BuffApe's design tokens (2026-10-27). One accent (banana), calm neutrals, one sans and one
   mono, both shipped with the page. Dark is the default; [data-theme="light"] is the same system on
   paper. Every color, size and duration on a Dawn page comes from here. README.md says how to use them. */

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces: canvas → raised band → card → control → selected */
  --bg-canvas: #0a0b0d;
  --bg-raised: #0f1013;
  --surface: #141519;
  --surface-2: #1a1c21;
  --surface-3: #22252b;
  --line: #24262c;
  --line-strong: #353840;

  /* Text */
  --text-strong: #f5f5f3;
  --text: #c8cbd0;
  --text-muted: #989ca4;
  --text-subtle: #8b8f98;
  --text-on-accent: #121212;

  /* The one accent: banana. Fill everywhere; text only on dark (10:1 or more). */
  --accent: #ffc83d;
  --accent-hover: #ffd466;
  --accent-pressed: #f2b200;
  --accent-text: #ffc83d;
  --accent-tint: rgba(255, 200, 61, 0.1);
  --accent-line: rgba(255, 200, 61, 0.34);

  /* The sunrise: only the hero and the final call to action use these. */
  --sun-core: #fff1c2;
  --sun-hot: #ffd36b;
  --sun-amber: #f4a83a;
  --sun-ember: #a8611a;
  --sun-night: #050607;

  /* Status: product screens only, never on marketing comparisons */
  --ok: #3ecf8e;
  --ok-tint: rgba(62, 207, 142, 0.12);
  --warn: #ff9f43;
  --warn-tint: rgba(255, 159, 67, 0.12);
  --danger: #f2555a;
  --danger-tint: rgba(242, 85, 90, 0.12);
  --info: #7cb7ff;
  --info-tint: rgba(124, 183, 255, 0.12);

  --focus: #ffd466;

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --size-label: 12px; /* mono, uppercase */
  --size-small: 14px;
  --size-ui: 15px; /* product body */
  --size-body: 17px; /* marketing body */
  --size-lead: 20px;
  --size-h4: 22px;
  --size-h3: 30px;
  --size-h2: clamp(36px, 4.4vw, 52px);
  --size-h1: clamp(44px, 6.6vw, 88px);

  --leading-tight: 1.04;
  --leading-heading: 1.12;
  --leading-ui: 1.45;
  --leading-body: 1.6;

  --tracking-display: -0.032em;
  --tracking-heading: -0.022em;
  --tracking-body: -0.006em;
  --tracking-label: 0.08em;

  /* Space: a 4 px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Shape */
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-window: 16px;
  --radius-pill: 999px;
  --border: 1px;

  /* Depth: borders do most of the work; shadows only lift overlays and the product window */
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-window: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--line);
  --glow-accent: 0 0 0 1px var(--accent-line), 0 10px 32px rgba(255, 200, 61, 0.2);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 600ms;
  --duration-sunrise: 2600ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-rise: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container: 1200px;
  --gutter: 24px;
  --section: 128px;
  --nav-height: 64px;
  --target: 44px;
}

[data-theme="light"] {
  color-scheme: light;
  --bg-canvas: #fafaf8;
  --bg-raised: #f3f3ef;
  --surface: #ffffff;
  --surface-2: #f5f5f2;
  --surface-3: #ebebe6;
  --line: #e5e4de;
  --line-strong: #d1d0c9;
  --text-strong: #111214;
  --text: #2d2f34;
  --text-muted: #5b5f66;
  --text-subtle: #63666e;
  --accent-text: #8a6100; /* banana is a fill on light, never text (1.5:1) */
  --accent-tint: #fff4cf;
  --accent-line: #e8c56a;
  --ok: #158a5a;
  --ok-tint: #e3f6ec;
  --warn: #b25e00;
  --warn-tint: #fff0e0;
  --danger: #c4312f;
  --danger-tint: #fdeaea;
  --info: #2765b8;
  --info-tint: #e7f0fc;
  --focus: #111214;
  --shadow-overlay: 0 20px 48px rgba(17, 18, 20, 0.14), 0 2px 6px rgba(17, 18, 20, 0.08);
  --shadow-window: 0 32px 80px rgba(17, 18, 20, 0.16), 0 0 0 1px var(--line);
  --glow-accent: 0 0 0 1px var(--accent-line), 0 8px 24px rgba(242, 178, 0, 0.22);
}

@media (max-width: 720px) {
  :root {
    --gutter: 20px;
    --section: 80px;
    --size-body: 16px;
    --size-lead: 18px;
  }
}

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