/* Copy of brand/tokens.css; change it there first. Only the @font-face URLs differ (../fonts/). */

/*
 * Snappington brand tokens. The source of truth for the website, the brand book and marketing
 * graphics. The desktop app has its own UI tokens (apps/desktop/src/shared/theme.css); the values
 * marked "= app" are shared with it and must change in both places.
 *
 * Fonts (brand/fonts, SIL OFL 1.1): Bricolage Grotesque (display), Inter (text), JetBrains Mono.
 * Copy the font files next to the stylesheet that uses them and keep the @font-face URLs relative.
 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-opsz-wght-latin.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-wght-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* ---- Core palette (fixed, theme-independent) ---------------------------------------------- */
  /* Racing Green, chosen 2026-09-25 (brand round 4). */
  --green-50: #eef7f2; /* tint surface */
  --green-100: #dcefe5; /* soft fills; the butler's disc on light */
  --green-200: #c3e3d2; /* tint lines */
  --green-300: #8fe6bf; /* = app --accent-text (dark). Links on dark */
  --green-400: #7fe0b5; /* Mint. = app --accent (dark). Buttons on dark (Ink text) */
  --green-500: #23a47c; /* Fresh Green. Tile highlight, charts */
  --green-550: #1f9a72; /* = app canvas and overlay chrome. The butler's bow tie and iris */
  --green-600: #0f6b4f; /* Racing Green. = app --accent (light). Brand, buttons, links on light */
  --green-700: #0c5a42; /* hover on light */
  --green-800: #0f4a39; /* the butler's disc on dark */
  --green-900: #093a2d; /* Deep Green. Tile shadow, dark brand bands */

  --marigold: #f5a524; /* the spark: highlights on dark, annotation marks in marketing art */
  --marker: #ffd98a; /* the highlighter on light: text highlights and callouts only */
  --marker-ink: #3d2a00;

  --ink-950: #0e0f11; /* = app --bg-canvas (dark) */
  --ink-900: #131417; /* Ink. = app --bg (dark) */
  --ink-850: #1b1c20; /* = app --bg-2 (dark) */
  --ink-800: #25262b;
  --ink-700: #2e2f35;
  --ink-600: #45464e;
  --ink-500: #6c6d77;
  --ink-400: #9d9ea8;
  --ink-300: #c3c4cc;
  --ink-200: #dddee4;
  --ink-100: #eceef2; /* = app --bg (light) */
  --ink-50: #f6f7f9; /* sunken panels on the white page */
  --white: #ffffff; /* Paper: the page is white */

  --success: #3fcf8e; /* status only; never next to the accent without an icon or a word */
  --red: #f2555a; /* also the record dot */
  --amber: #f5a524;

  /* The tile gradient: the app tile, one hero moment per view, never behind body text. */
  --tile-gradient: linear-gradient(135deg, #23a47c 0%, #0f6b4f 55%, #093a2d 100%);
  --tile-gradient-soft: linear-gradient(135deg, rgba(35, 164, 124, 0.14), rgba(15, 107, 79, 0.1) 55%, rgba(245, 165, 36, 0.1));

  /* ---- Type ------------------------------------------------------------------------------------ */
  --font-display: "Bricolage Grotesque", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-text: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* Display sizes use tight tracking; text sizes use none. Fluid between 360 and 1280 px. */
  --step-hero: clamp(2.75rem, 1.6rem + 5.1vw, 5.75rem); /* 44 -> 92 */
  --step-h1: clamp(2.25rem, 1.55rem + 3.1vw, 4rem); /* 36 -> 64 */
  --step-h2: clamp(1.75rem, 1.3rem + 2vw, 2.875rem); /* 28 -> 46 */
  --step-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* 20 -> 24 */
  --step-lead: clamp(1.125rem, 1.03rem + 0.4vw, 1.3125rem); /* 18 -> 21 */
  --step-body: 1rem; /* 16 */
  --step-small: 0.875rem; /* 14 */
  --step-micro: 0.75rem; /* 12, labels in caps */
  --track-display: -0.03em;
  --track-heading: -0.02em;
  --track-caps: 0.08em;

  /* ---- Shape, depth, motion ------------------------------------------------------------------ */
  --radius-xs: 6px;
  --radius-sm: 8px; /* = app --radius */
  --radius: 12px; /* = app --radius-lg; cards, screenshots */
  --radius-lg: 20px; /* big panels */
  --radius-pill: 999px;
  --tile-radius: 25%; /* the app tile: 15/60 of its size */

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* = app --ease */
  --ease-snap: cubic-bezier(0.3, 1.4, 0.5, 1); /* small overshoot: things that "snap" into place */
  --dur-quick: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;

  /* ---- Theme: light (default). Background choice "White": a white page, neutral greys --------- */
  color-scheme: light;
  --bg: var(--white);
  --bg-raised: var(--white);
  --bg-sunken: var(--ink-50);
  --bg-inverse: var(--ink-900);
  --fg: var(--ink-900);
  --fg-muted: #555866;
  --fg-subtle: #686b78;
  --fg-inverse: var(--white);
  --line: rgba(19, 20, 23, 0.1);
  --line-strong: rgba(19, 20, 23, 0.18);
  --accent: var(--green-600);
  --accent-hover: var(--green-700);
  --accent-fg: var(--white);
  --accent-text: var(--green-600);
  --accent-soft: rgba(15, 107, 79, 0.1);
  --focus-ring: 0 0 0 3px rgba(15, 107, 79, 0.3);
  --shadow-sm: 0 1px 2px rgba(19, 20, 23, 0.08);
  --shadow: 0 14px 34px -12px rgba(19, 20, 23, 0.22), 0 2px 6px rgba(19, 20, 23, 0.06);
  --shadow-lg: 0 40px 90px -30px rgba(9, 58, 45, 0.4), 0 10px 24px -8px rgba(19, 20, 23, 0.16);
  --highlight: var(--marker);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--ink-900);
    --bg-raised: var(--ink-850);
    --bg-sunken: var(--ink-950);
    --bg-inverse: var(--white);
    --fg: #ececf0;
    --fg-muted: #a3a4ae;
    --fg-subtle: #868792;
    --fg-inverse: var(--ink-900);
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.15);
    --accent: var(--green-400);
    --accent-hover: #95e8c3;
    --accent-fg: var(--ink-900);
    --accent-text: var(--green-300);
    --accent-soft: rgba(127, 224, 181, 0.14);
    --focus-ring: 0 0 0 3px rgba(127, 224, 181, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, 0.8), 0 10px 24px -8px rgba(0, 0, 0, 0.4);
    --highlight: rgba(245, 165, 36, 0.85); /* marigold */
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--ink-900);
  --bg-raised: var(--ink-850);
  --bg-sunken: var(--ink-950);
  --bg-inverse: var(--white);
  --fg: #ececf0;
  --fg-muted: #a3a4ae;
  --fg-subtle: #868792;
  --fg-inverse: var(--ink-900);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.15);
  --accent: var(--green-400);
  --accent-hover: #95e8c3;
  --accent-fg: var(--ink-900);
  --accent-text: var(--green-300);
  --accent-soft: rgba(127, 224, 181, 0.14);
  --focus-ring: 0 0 0 3px rgba(127, 224, 181, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, 0.8), 0 10px 24px -8px rgba(0, 0, 0, 0.4);
  --highlight: rgba(245, 165, 36, 0.85); /* marigold */
}