/* Theme layer — design tokens for the Codekata sumi-e brand (ink on rice
   paper, brand orange accent). Linked first on every page so these custom
   properties are available to main.css, game.css, and settings.css. Single
   source of truth for color, typography, and elevation, so the landing and
   game screens share one look. See docs/decisions/011-css-organization.md. */

/* Brand typeface: JetBrains Mono, self-hosted (no runtime CDN dependency).
   Weight 700 is the wordmark/heading weight per the brand guide. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
}

:root {
  /* Accents */
  --brand-orange: #f97316;
  --brand-orange-strong: #e8620e;
  --brand-orange-soft: #fdba74;
  --brand-amber: #fbbf24;
  --brand-peach: #ffe8d6;

  /* Background & surfaces (rice paper → warmer paper tints) */
  --bg: #f3ede1;
  --bg-gradient: linear-gradient(135deg, #f3ede1, #efe8db);
  --surface: #faf6ee;
  --surface-alt: #efe8db;
  --code-surface: #efe8db;

  /* Lines & text (sumi ink on rice paper) */
  --border: #e7dfd0;
  --border-strong: #dcd2bf;
  --text: #1f1c18;
  --muted: #6c655a;

  /* Typing state colors, tuned for the light code pane */
  --char-pending: #9a917f;
  --char-correct: #1f1c18;
  --char-incorrect: #d1402a;
  --cursor: #f97316;

  /* Status */
  --danger: #e2603f;

  /* Elevation (ink-tinted shadows) */
  --shadow-card: 0 18px 40px rgb(31 28 24 / 12%);
  --shadow-panel: 0 18px 40px rgb(31 28 24 / 22%);

  /* Typography */
  --font-ui: system-ui, -apple-system, sans-serif;
  --font-brand: "JetBrains Mono", ui-monospace, "SF Mono", menlo, monospace;
  --font-code: "JetBrains Mono", "Fira Code", "Courier New", monospace;

  /* Font-size scale (rem, assuming the browser-default 16px root). Exact
     conversions of the previous px sizes; 13/14/15px are deliberately kept
     off the 4px grid so existing control text does not change size. */
  --font-xs: 0.8125rem; /* 13px */
  --font-sm: 0.875rem; /* 14px */
  --font-md: 0.9375rem; /* 15px */
  --font-base: 1rem; /* 16px */
  --font-lg: 1.125rem; /* 18px */
  --font-xl: 1.25rem; /* 20px */
  --font-2xl: 1.375rem; /* 22px */
  --font-3xl: 1.5rem; /* 24px */
  --font-scale: 1;
  --font-code-size: calc(1rem * var(--font-scale));  

  /* Spacing scale (rem) for padding, margin, gap, and inset offsets. Inline
     literals are snapped to the nearest step (e.g. 6→8, 10→12, 14→16, 18→20),
     so a few values shift by at most 2px in exchange for one consistent scale. */
  --space-2xs: 0.25rem; /* 4px */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 0.75rem; /* 12px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.25rem; /* 20px */
  --space-xl: 1.5rem; /* 24px */
  --space-2xl: 2rem; /* 32px */
  --space-3xl: 2.5rem; /* 40px */
  --space-4xl: 3rem; /* 48px */
  --space-5xl: 4rem; /* 64px */
  --space-6xl: 5.5rem; /* 88px, mobile settings-button offset */

  /* Corner radii (rem). 5/6px corners snap to 8px and 10/13px to 12px. */
  --radius-sm: 0.5rem; /* 8px */
  --radius-md: 0.75rem; /* 12px */
  --radius-lg: 1rem; /* 16px */
  --radius-xl: 1.125rem; /* 18px */
  --radius-2xl: 1.25rem; /* 20px */
  --radius-pill: 1.75rem; /* 28px */

  /* Border widths — kept in px on purpose: rem hairlines can sub-pixel-round
     away to nothing on some displays. */
  --border-width: 1px;
  --border-width-thick: 2px;

  /* Shared layout dimensions reused across pages (rem). One-off dimensions stay
     inline as rem at their use site. */
  --card-min-height: 35rem; /* 560px */
  --pane-height: 25.625rem; /* 410px code/render pane */
  --mobile-max-width: 30rem; /* 480px, matches the 30em mobile breakpoint */
}

/* Light theme: sunny yellow */
:root[data-theme="yellow"] {
  --brand-orange: #eab308;
  --brand-orange-strong: #a16207;
  --brand-orange-soft: #fde68a;
  --brand-amber: #facc15;
  --brand-peach: #fef9c3;
  --bg: #fffbea;
  --bg-gradient: linear-gradient(135deg, #fffbea, #fef3c7);
  --surface: #fffef6;
  --surface-alt: #fef9c3;
  --code-surface: #fffbeb;
  --border: #eadc9a;
  --border-strong: #d6bd5f;
  --text: #42330a;
  --muted: #8a741f;
  --char-pending: #b8a35a;
  --char-correct: #42330a;
  --char-incorrect: #dc2626;
  --cursor: #ca8a04;
  --danger: #dc2626;
  --shadow-card: 0 18px 40px rgb(113 86 9 / 14%);
  --shadow-panel: 0 18px 40px rgb(113 86 9 / 24%);
}

/* Dark theme: purple night */
:root[data-theme="purple"] {
  --brand-orange: #a855f7;
  --brand-orange-strong: #c084fc;
  --brand-orange-soft: #7e22ce;
  --brand-amber: #22d3ee;
  --brand-peach: #312244;
  --bg: #12091f;
  --bg-gradient: linear-gradient(135deg, #12091f, #24103a);
  --surface: #1d1130;
  --surface-alt: #2b1744;
  --code-surface: #160c26;
  --border: #3f2a5f;
  --border-strong: #6b3fa0;
  --text: #f4eaff;
  --muted: #bca7d8;
  --char-pending: #7f6b9e;
  --char-correct: #f4eaff;
  --char-incorrect: #fb7185;
  --cursor: #c084fc;
  --danger: #fb7185;
  --shadow-card: 0 18px 40px rgb(0 0 0 / 35%);
  --shadow-panel: 0 18px 40px rgb(0 0 0 / 45%);
}

/* Dark theme: ember orange */
:root[data-theme="orange"] {
  --brand-orange: #fb923c;
  --brand-orange-strong: #fdba74;
  --brand-orange-soft: #9a3412;
  --brand-amber: #f59e0b;
  --brand-peach: #3b1d10;
  --bg: #160c06;
  --bg-gradient: linear-gradient(135deg, #160c06, #3a1708);
  --surface: #241209;
  --surface-alt: #351807;
  --code-surface: #1c0f08;
  --border: #5a2a12;
  --border-strong: #9a3412;
  --text: #fff3e7;
  --muted: #d6a27a;
  --char-pending: #9f7658;
  --char-correct: #fff3e7;
  --char-incorrect: #f87171;
  --cursor: #fb923c;
  --danger: #f87171;
  --shadow-card: 0 18px 40px rgb(0 0 0 / 38%);
  --shadow-panel: 0 18px 40px rgb(0 0 0 / 48%);
}