/*
 * Instead theme: CSS custom properties. Source: tokens.json (same names, kebab-case).
 *
 * Dark is the default and the product. Light follows the system's
 * prefers-color-scheme unless the page pins a theme:
 *   <html data-theme="dark">   always dark (doitinstead.com does this: the app is dark)
 *   <html data-theme="light">  always light
 * data-theme also works on any element, to theme one section (a light panel on a dark page).
 *
 * website/public/theme.css is a copy of this file. Change this one, then copy it.
 */

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

  /* Semantic colour (color.ts). */
  --ground: #120c08;
  --surface: #1c140e;
  --raised: #281d15;
  --raised-pressed: #3a2b20;
  --ink: #fff4e6;
  --ink-muted: #cdbda9;
  --ink-faint: #a89784;
  --line: rgba(255, 244, 230, 0.12);
  --line-strong: rgba(255, 244, 230, 0.28);
  --accent: #ffb238;
  --accent-pressed: #e89b1e;
  --accent-text: #ffb238;
  --on-accent: #1a0e04;
  --success: #8bd5a0;
  --warning: #ffc98a;
  --danger: #ff9c87;
  --veil: rgba(255, 244, 230, 0.08);
  --scrim: rgba(11, 7, 5, 0.64);

  /* The mark's gradients (BRAND.md), for inline SVG: stop-color: var(--mark-gold-1). */
  --mark-gold-1: #ffe7b0;
  --mark-gold-2: #ffb238;
  --mark-gold-3: #f59e0b;
  --mark-ember-1: #f26b2a;
  --mark-ember-2: #e4572e;
  --mark-ember-3: #b83a12;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ground: #fffbf5;
    --surface: #fff4e6;
    --raised: #f6ebdc;
    --raised-pressed: #ecddca;
    --ink: #1a0e04;
    --ink-muted: #5c4636;
    --ink-faint: #7a6452;
    --line: rgba(26, 14, 4, 0.12);
    --line-strong: rgba(26, 14, 4, 0.28);
    --accent: #f7a928;
    --accent-pressed: #e8900a;
    --accent-text: #9a4a06;
    --on-accent: #1a0e04;
    --success: #1f6b3a;
    --warning: #8a5a0a;
    --danger: #b42318;
    --veil: rgba(26, 14, 4, 0.05);
    --scrim: rgba(26, 14, 4, 0.4);
    --mark-gold-1: #f7a928;
    --mark-gold-2: #e8900a;
    --mark-gold-3: #c96f08;
    --mark-ember-1: #ea580c;
    --mark-ember-2: #ce490f; /* midpoint of the two on-light ember stops */
    --mark-ember-3: #b23a12;
  }
}

[data-theme="light"] {
  color-scheme: light;
  --ground: #fffbf5;
  --surface: #fff4e6;
  --raised: #f6ebdc;
  --raised-pressed: #ecddca;
  --ink: #1a0e04;
  --ink-muted: #5c4636;
  --ink-faint: #7a6452;
  --line: rgba(26, 14, 4, 0.12);
  --line-strong: rgba(26, 14, 4, 0.28);
  --accent: #f7a928;
  --accent-pressed: #e8900a;
  --accent-text: #9a4a06;
  --on-accent: #1a0e04;
  --success: #1f6b3a;
  --warning: #8a5a0a;
  --danger: #b42318;
  --veil: rgba(26, 14, 4, 0.05);
  --scrim: rgba(26, 14, 4, 0.4);
  --mark-gold-1: #f7a928;
  --mark-gold-2: #e8900a;
  --mark-gold-3: #c96f08;
  --mark-ember-1: #ea580c;
  --mark-ember-2: #ce490f; /* midpoint of the two on-light ember stops */
  --mark-ember-3: #b23a12;
}

:root {
  /* Type (type.ts). The serif is the app talking; the sans is what you act on. */
  --font-serif: ui-serif, "New York", "Iowan Old Style", "Noto Serif", Georgia, serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-wordmark: "Gabarito", var(--font-sans);
  --text-display: 200 64px/70px var(--font-sans);
  --text-title: 400 30px/37px var(--font-serif);
  --text-headline: 400 24px/31px var(--font-serif);
  --text-heading: 600 20px/26px var(--font-sans);
  --text-body: 400 17px/24px var(--font-sans);
  --text-body-strong: 600 17px/23px var(--font-sans);
  --text-callout: 400 15px/21px var(--font-sans);
  --text-footnote: 400 13px/18px var(--font-sans);
  --text-button: 600 17px/22px var(--font-sans);
  --measure: 520px;

  /* Space (4-point scale), radius (by hierarchy), size. */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --radius-tag: 6px;
  --radius-tile: 10px;
  --radius-row: 14px;
  --radius-panel: 20px;
  --radius-sheet: 28px;
  --radius-pill: 999px;
  --size-hit: 44px;
  --size-button: 56px;
  --size-chip: 48px;

  /* Motion (motion.ts). Springs as linear() easings; pair each with its duration. */
  --duration-press: 100ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 360ms;
  --duration-moment: 700ms;
  --spring-press: linear(0, 0.051, 0.163, 0.294, 0.422, 0.537, 0.636, 0.717, 0.782, 0.834, 0.874, 0.905, 0.929, 0.947, 0.961, 0.971, 0.979, 0.984, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 1);
  --spring-press-duration: 220ms;
  --spring-snappy: linear(0, 0.048, 0.157, 0.292, 0.43, 0.556, 0.666, 0.757, 0.829, 0.884, 0.925, 0.955, 0.975, 0.989, 0.997, 1.003, 1.005, 1.006, 1.006, 1.006, 1.005, 1.004, 1.003, 1.002, 1);
  --spring-snappy-duration: 390ms;
  --spring-smooth: linear(0, 0.05, 0.158, 0.286, 0.413, 0.527, 0.626, 0.707, 0.774, 0.826, 0.868, 0.9, 0.925, 0.943, 0.958, 0.969, 0.977, 0.983, 0.987, 0.991, 0.993, 0.995, 0.996, 0.997, 1);
  --spring-smooth-duration: 540ms;
  --spring-bouncy-subtle: linear(0, 0.045, 0.152, 0.288, 0.431, 0.566, 0.685, 0.784, 0.863, 0.923, 0.966, 0.995, 1.013, 1.024, 1.028, 1.028, 1.026, 1.022, 1.018, 1.014, 1.011, 1.008, 1.005, 1.003, 1);
  --spring-bouncy-subtle-duration: 560ms;
  --press-scale: 0.97;
}