/* Design tokens: the one place colours and font files are defined. See docs/design/DESIGN.md ("Recreo", Tinta).
   Loaded before styles.css and reference.css, which only read these variables. */
@font-face { font-family: Nunito; src: url("fonts/Nunito.ttf") format("truetype"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: Fredoka; src: url("fonts/Fredoka.ttf") format("truetype"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: Bungee; src: url("fonts/Bungee.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }

:root {
  /* Tinta palette */
  --tinta-ink: #14213D;
  --tinta-primary: #1D3557;
  --tinta-accent: #8DB4CC;
  --tinta-highlight: #F3DFA2;
  --tinta-soft: #DCEAF2;
  --tinta-ground: #F5F8FA;
  --tinta-white: #FFFFFF;
  --tinta-danger: #aa2929; /* the app's existing error red, for light surfaces in either theme */

  --cp-font-body: Nunito, "Trebuchet MS", "Segoe UI", sans-serif;
  --cp-font-heading: Fredoka, "Trebuchet MS", "Segoe UI", sans-serif;
  --cp-font-display: Bungee, Impact, sans-serif;
  --cp-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
  --ui-ease: cubic-bezier(.16,1,.3,1); --ui-sidebar: 256px;
}

:root, html[data-theme="light"] {
  color-scheme: light;
  --cp-bg: var(--tinta-ground); --cp-bg-elevated: var(--tinta-white); --cp-surface: var(--tinta-white); --cp-surface-soft: var(--tinta-soft);
  --cp-border: var(--tinta-ink); --cp-border-strong: var(--tinta-ink);
  --cp-text: var(--tinta-ink); --cp-text-muted: #3D4A63; --cp-text-soft: var(--tinta-primary); --cp-muted: #3D4A63;
  --cp-accent: var(--tinta-primary); --cp-accent-hover: var(--tinta-ink); --cp-accent-fg: var(--tinta-white);
  --cp-accent-soft: var(--tinta-soft); --cp-link: var(--tinta-primary); --cp-highlight: var(--tinta-highlight);
  --cp-brand-blue: var(--tinta-primary); --cp-brand-violet: var(--tinta-accent); --cp-brand-teal: var(--tinta-primary);
  /* Flat, not a gradient. Every user of this sets white text, so it stays dark in both themes. */
  --cp-brand-gradient: linear-gradient(var(--tinta-primary), var(--tinta-primary));
  /* Status colours. Success and warning use the palette; danger keeps the app's existing red. */
  --cp-success: var(--tinta-primary); --cp-warning: var(--tinta-ink); --cp-danger: #aa2929;
  --cp-panel: var(--tinta-white); --cp-panel-strong: var(--tinta-soft);
  --cp-hard: var(--tinta-ink); --cp-cta-bg: var(--tinta-highlight); --cp-cta-fg: var(--tinta-ink);
  --cp-hero-bg: var(--tinta-primary); --cp-hero-fg: var(--tinta-white);
  --cp-shadow: 5px 5px 0 var(--tinta-ink); --cp-overlay: #14213Db3; --cp-sheen: transparent;
  --cp-glow-a: transparent; --cp-glow-b: transparent;
  --cp-activity-low: var(--tinta-soft); --cp-activity-medium: var(--tinta-accent); --cp-activity-high: var(--tinta-primary); --cp-activity-peak: var(--tinta-ink);
  --cp-practice-strong: var(--tinta-primary); --cp-practice-building: #3D4A63;
  --cp-practice-review: var(--tinta-ink); --cp-practice-weak: #aa2929;
}

/* Dark Tinta: the same family turned over. Proposed 2026-10-03; two values are new (the ground and the muted text). */
html[data-theme="dark"] {
  color-scheme: dark;
  --cp-bg: #0E1626; --cp-bg-elevated: var(--tinta-ink); --cp-surface: var(--tinta-ink); --cp-surface-soft: var(--tinta-primary);
  --cp-border: var(--tinta-accent); --cp-border-strong: var(--tinta-soft);
  --cp-text: var(--tinta-ground); --cp-text-muted: #B8CCDA; --cp-text-soft: var(--tinta-soft); --cp-muted: #B8CCDA;
  --cp-accent: var(--tinta-highlight); --cp-accent-hover: var(--tinta-white); --cp-accent-fg: var(--tinta-ink);
  --cp-accent-soft: var(--tinta-primary); --cp-link: var(--tinta-highlight); --cp-highlight: var(--tinta-primary);
  --cp-brand-blue: var(--tinta-accent); --cp-brand-violet: var(--tinta-accent); --cp-brand-teal: var(--tinta-accent);
  --cp-brand-gradient: linear-gradient(var(--tinta-primary), var(--tinta-primary));
  --cp-success: var(--tinta-highlight); --cp-warning: var(--tinta-highlight); --cp-danger: #ff9c9c;
  --cp-panel: var(--tinta-ink); --cp-panel-strong: var(--tinta-primary);
  --cp-hard: #00000099; --cp-cta-bg: var(--tinta-highlight); --cp-cta-fg: var(--tinta-ink);
  --cp-hero-bg: var(--tinta-primary); --cp-hero-fg: var(--tinta-white);
  --cp-shadow: 5px 5px 0 #00000099; --cp-overlay: #000000b3; --cp-sheen: transparent;
  --cp-glow-a: transparent; --cp-glow-b: transparent;
  --cp-activity-low: var(--tinta-primary); --cp-activity-medium: var(--tinta-accent); --cp-activity-high: var(--tinta-soft); --cp-activity-peak: var(--tinta-highlight);
  --cp-practice-strong: var(--tinta-highlight); --cp-practice-building: var(--tinta-accent);
  --cp-practice-review: var(--tinta-soft); --cp-practice-weak: #ff9c9c;
}