/*
 * Syncc 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
 *   - typeface: Inter, self-hosted from /fonts/inter (OFL 1.1); system monospace only for code
 *   - src/components/pricing.tsx, wordmark.tsx -> card radius 1.375rem, 0.5rem buttons, pill badges,
 *     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: dark by default. The server renders <html data-theme="dark"> (also without
 *   JavaScript); the inline script in src/views.js applies a saved choice (localStorage "theme") before
 *   first paint. The system light/dark setting is deliberately not used for the default.
 * 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: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 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;

  /* Premium layer (redesign): depth, glass, glow. Glows derive from --accent so BRAND_COLOR recolours them. */
  --bg-2: #fbfbfc;
  --card-glass: rgba(255, 255, 255, 0.78);
  --line-strong: #dedee3;
  --grid-dot: rgba(29, 29, 31, 0.10);
  --aurora-1: color-mix(in srgb, var(--accent) 26%, transparent);
  --aurora-2: rgba(255, 149, 82, 0.22);
  --aurora-3: rgba(255, 196, 160, 0.20);
  --spot: color-mix(in srgb, var(--accent) 11%, transparent);
  --beam: color-mix(in srgb, var(--accent) 85%, transparent);
  --glow: color-mix(in srgb, var(--accent-fill) 32%, transparent);
  --heading-fade: #6e6e73;
  --shadow-xs: 0 1px 2px rgba(20, 20, 40, 0.05);
  --shadow-soft: 0 1px 2px rgba(20, 20, 40, 0.04), 0 0.5rem 1.5rem -0.5rem rgba(20, 20, 40, 0.10);
  --shadow-lift: 0 1px 2px rgba(20, 20, 40, 0.05), 0 1.5rem 3rem -1rem rgba(20, 20, 40, 0.18);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --scrim: rgba(255, 255, 255, 0.6);
}

: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);

  --bg-2: #0b0c0d;
  --card-glass: rgba(15, 16, 17, 0.72);
  --line-strong: #2e3036;
  --grid-dot: rgba(255, 255, 255, 0.07);
  --aurora-1: color-mix(in srgb, var(--accent) 22%, transparent);
  --aurora-2: rgba(255, 122, 74, 0.10);
  --aurora-3: rgba(208, 214, 224, 0.05);
  --spot: color-mix(in srgb, var(--accent) 14%, transparent);
  --beam: var(--accent);
  --glow: color-mix(in srgb, var(--accent) 38%, transparent);
  --heading-fade: #8a8f98;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1.75rem 3.5rem -1rem rgba(0, 0, 0, 0.75);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --scrim: rgba(8, 9, 10, 0.6);
}