/*
 * Slotfox design tokens.
 * Source: BotLane's botlane.io site, github.com/botlaneio/botlane (main):
 *   - src/app/globals.css   -> colour tokens (--bl-*): white, near-black, one accent "Lane red" #e0312b
 *   - src/app/layout.tsx    -> Geist / Geist Mono typefaces
 *   - src/components/pricing.tsx, wordmark.tsx -> card radius 1.375rem, 0.5rem buttons, pill badges,
 *     mono uppercase eyebrows (0.08em tracking), tight headings (-0.04em), wordmark tracking -0.035em
 * Dark theme mirrors botlane.io's own dark mode (github.com/botlaneio/neural_substrate,
 *   src/styles/tokens.css :root[data-theme="dark"]): void/carbon/obsidian surfaces #08090a / #0f1011 /
 *   #161718, graphite hairline #23252a, paper/mist/fog text #fff / #d0d6e0 / #8a8f98, inverted white
 *   buttons, green #62c073. The accent stays Lane red, using the on-dark red #ff4a3d (--bl-gradient-on-dark).
 * How the theme is chosen: <html data-theme="light|dark"> is set before first paint by the inline
 *   script in src/views.js (saved choice in localStorage "theme", else prefers-color-scheme).
 *   Without JavaScript the @media block below follows the system setting.
 * Change the brand colour at runtime with BRAND_COLOR (overrides the --accent* tokens in both themes).
 * All text pairs meet WCAG AA (4.5:1); --ink-disabled is only for inactive calendar days.
 */
:root {
  color-scheme: light;
  --bg: #ffffff;           /* --bl-bg */
  --surface: #f5f5f7;      /* --bl-surface */
  --card: #ffffff;
  --ink: #1d1d1f;          /* --bl-ink */
  --ink-2: #3a3a3c;        /* --bl-ink-2 */
  --muted: #6e6e73;        /* --bl-muted */
  --faint: #707075;        /* --bl-faint, darkened from #8e8e93 to pass AA on --surface */
  --ink-disabled: #b4b4b9; /* unavailable calendar days (inactive UI, exempt from AA) */
  --line: #ececef;         /* --bl-line */
  --btn: #2c2c30;          /* --bl-btn: dark buttons, a touch lighter than text */
  --btn-hover: #3a3a3f;    /* --bl-btn-hover */
  --btn-ink: #ffffff;
  --accent: #e0312b;       /* --bl-red (Lane red) */
  --accent-fill: var(--accent); /* filled accent surfaces (primary button, selected day) behind --on-accent */
  --accent-strong: #d1291f;/* --bl-red-strong */
  --accent-ink: #b3261e;   /* --bl-red-ink: accent text on light */
  --accent-tint: #fdeceb;  /* --bl-red-tint */
  --on-accent: #ffffff;
  --ok: #1a7f37;           /* --bl-green */
  --ok-tint: #e8f5ec;      /* --bl-green-tint */
  --warn: #9a6700;
  --warn-tint: #fff8e1;

  --font-sans: 'Geist Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --radius-card: 1.375rem; /* pricing cards */
  --radius-btn: 0.5rem;    /* CTA buttons */
  --radius-input: 0.625rem;
  --radius-pill: 999px;    /* badges */

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;

  --shadow-card: 0 1.25rem 2.75rem rgba(20, 20, 40, 0.08);
  --shadow-accent: 0 0.25rem 0.875rem color-mix(in srgb, var(--accent-fill) 20%, transparent);
  --topbar-bg: color-mix(in srgb, var(--bg) 85%, transparent);
  --tracking-tight: -0.04em;
  --tracking-mark: -0.035em;
  --tracking-eyebrow: 0.08em;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08090a;           /* botlane.io dark: void */
  --surface: #1a1b1e;      /* a step above botlane.io's #161718 so calendar days read on a card */
  --card: #0f1011;         /* carbon */
  --ink: #ffffff;          /* paper */
  --ink-2: #d0d6e0;        /* mist */
  --muted: #8a8f98;        /* fog */
  --faint: #868b94;
  --ink-disabled: #45474d;
  --line: #23252a;         /* graphite hairline */
  --btn: #ffffff;          /* inverted buttons, as on botlane.io */
  --btn-hover: #e4e6ea;
  --btn-ink: #08090a;
  --accent: #ff4a3d;       /* --bl-gradient-on-dark: accent text, rings, dots */
  --accent-strong: #ff5e52;
  --accent-fill: #d92d24;  /* white text on #ff4a3d is only 3.3:1, so fills use a deeper red (4.8:1) */
  --accent-ink: #ff7a70;
  --accent-tint: rgba(255, 74, 61, 0.14);
  --on-accent: #ffffff;
  --ok: #62c073;           /* botlane.io dark green */
  --ok-tint: rgba(98, 192, 115, 0.14);
  --warn: #e3b341;
  --warn-tint: rgba(227, 179, 65, 0.14);
  --shadow-card: 0 1.25rem 2.75rem rgba(0, 0, 0, 0.5);
  --topbar-bg: color-mix(in srgb, var(--bg) 80%, transparent);
}

/* No-JS fallback only: follow the system. (With JS, data-theme is always set before paint.) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #08090a;           /* botlane.io dark: void */
    --surface: #1a1b1e;      /* a step above botlane.io's #161718 so calendar days read on a card */
    --card: #0f1011;         /* carbon */
    --ink: #ffffff;          /* paper */
    --ink-2: #d0d6e0;        /* mist */
    --muted: #8a8f98;        /* fog */
    --faint: #868b94;
    --ink-disabled: #45474d;
    --line: #23252a;         /* graphite hairline */
    --btn: #ffffff;          /* inverted buttons, as on botlane.io */
    --btn-hover: #e4e6ea;
    --btn-ink: #08090a;
    --accent: #ff4a3d;       /* --bl-gradient-on-dark: accent text, rings, dots */
    --accent-strong: #ff5e52;
    --accent-fill: #d92d24;  /* white text on #ff4a3d is only 3.3:1, so fills use a deeper red (4.8:1) */
    --accent-ink: #ff7a70;
    --accent-tint: rgba(255, 74, 61, 0.14);
    --on-accent: #ffffff;
    --ok: #62c073;           /* botlane.io dark green */
    --ok-tint: rgba(98, 192, 115, 0.14);
    --warn: #e3b341;
    --warn-tint: rgba(227, 179, 65, 0.14);
    --shadow-card: 0 1.25rem 2.75rem rgba(0, 0, 0, 0.5);
    --topbar-bg: color-mix(in srgb, var(--bg) 80%, transparent);
  }
}