:root {
  /* ─── Brand · Atelier palette (neutral paper · mineral teal accent) ─ */
  --color-bone:       #FDFDFD;   /* near-white paper */
  --color-bone-deep:  #EFEFED;   /* sunken paper */
  --color-cream:      #FFFFFF;   /* clean paper for surfaces */
  --color-cream-soft: #F5F5F4;
  --color-ink:        #1A1A18;   /* near-black */
  --color-ink-soft:   #3A3A36;
  --color-graphite:   #6B6B68;   /* mid */
  --color-stone:      #A3A3A0;   /* muted */
  --color-mist:       #C9C9C6;   /* hairlines */
  --color-fog:        #E2E2DF;   /* fills */

  /* Hero band glow (dark mode swaps these with the rest of the palette) */
  --hero-glow:    oklch(0.972 0.003 85);
  --hero-glow-2:  oklch(0.978 0.002 85);

  /* Single calm accent — mineral teal */
  --color-accent:        #2E6F70;
  --color-accent-deep:   #1E5253;
  --color-accent-soft:   #5C9596;
  --color-accent-tint:   #DCE9E9;

  /* Secondary — sage for "done" (kept distinct from accent) */
  --color-sage:        #5C7457;
  --color-sage-deep:   #455B41;
  --color-sage-tint:   #DCE3D6;

  /* Status */
  --color-error:       #B53A2B;
  --color-warning:     #C58A2C;

  /* Google Calendar brand tint — connection logo + ghost block fallback color */
  --gcal-tint:         #3F6FA6;

  /* Filters for SVG recoloring */
  --filter-ink:     invert(8%) sepia(7%) saturate(900%) hue-rotate(355deg) brightness(95%) contrast(88%);
  --filter-cream:   invert(98%) sepia(7%) saturate(167%) hue-rotate(7deg) brightness(101%) contrast(96%);
  --filter-stone:   invert(64%) sepia(8%) saturate(265%) hue-rotate(11deg) brightness(95%) contrast(86%);
  --filter-accent:  invert(38%) sepia(22%) saturate(797%) hue-rotate(135deg) brightness(92%) contrast(86%);
  --filter-sage:    invert(46%) sepia(13%) saturate(636%) hue-rotate(57deg) brightness(91%) contrast(82%);
  --filter-white:   brightness(0) invert(1);

  /* Legacy mapping — keep existing variable names alive */
  --color-white:       #FFFFFF;
  --color-primary:        var(--color-accent);
  --color-primary-dark:   var(--color-accent-deep);
  --color-primary-light:  var(--color-accent-soft);
  --color-secondary:        var(--color-bone-deep);
  --color-secondary-dark:   var(--color-fog);
  --color-secondary-light:  var(--color-cream);
  --color-success:        var(--color-sage);
  --color-success-dark:   var(--color-sage-deep);
  --color-success-light:  var(--color-sage);
  --color-error-dark:     #8E2D22;
  --color-error-light:    #D5604F;

  --color-gray-50:  #F4EFE7;
  --color-gray-100: #E2DBCB;
  --color-gray-200: #C9C2B5;
  --color-gray-300: #A39C90;
  --color-gray-400: #8A8478;
  --color-gray-500: #6B655B;
  --color-gray-600: #4E4942;
  --color-gray-700: #3A352E;
  --color-gray-800: #261F1B;
  --color-gray-900: #1A1815;

  --filter-success-light: var(--filter-sage);
  --filter-gray-400: var(--filter-stone);

  --color-text:        var(--color-ink);
  --color-text-muted:  var(--color-graphite);

  /* ─── Typography ──────────────────────────────────────────────────── */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --font-family-sans: var(--font-sans);

  --display-axes: "opsz" 144, "SOFT" 100, "WONK" 1;
  --display-axes-tight: "opsz" 48, "SOFT" 50, "WONK" 0;

  /* Sizes */
  --font-size-xxs:  0.625rem;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-md:   1rem;
  --font-size-lg:   1.25rem;
  --font-size-xl:   1.625rem;
  --font-size-xxl:  2.25rem;
  --font-size-3xl:  3rem;
  --font-size-4xl:  4.5rem;
  --font-size-5xl:  6rem;

  --font-weight-light:      300;
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;

  /* ─── Space & rhythm ──────────────────────────────────────────────── */
  --spacing-xxs: 0.25rem;
  --spacing-xs:  0.5rem;
  --spacing-sm:  0.75rem;
  --spacing-md:  1rem;
  --spacing-lg:  1.5rem;
  --spacing-xl:  2rem;
  --spacing-xxl: 3rem;
  --spacing-3xl: 4.5rem;
  --spacing-4xl: 7rem;

  --border-radius-sm:   3px;
  --border-radius-base: 6px;
  --border-radius-lg:   12px;
  --border-radius-xl:   20px;
  --border-radius-pill: 9999px;

  --border-base:    1px solid var(--color-fog);
  --border-light:   1px solid var(--color-bone-deep);
  --border-strong:  1px solid var(--color-mist);
  --border-ink:     1px solid var(--color-ink);

  --box-shadow-thin: 0 1px 2px rgba(26, 26, 24, 0.04);
  --box-shadow-base: 0 1px 2px rgba(26, 26, 24, 0.04), 0 4px 16px -8px rgba(26, 26, 24, 0.06);
  --box-shadow-lift: 0 2px 4px rgba(26, 26, 24, 0.06), 0 12px 32px -12px rgba(26, 26, 24, 0.12);
  --box-shadow-card: 0 1px 0 var(--color-bone-deep), 0 8px 24px -16px rgba(26, 26, 24, 0.18);
  --box-shadow-focus: 0 0 0 3px rgba(46, 111, 112, 0.18);

  /* Paper grain */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0.55 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.45'/></svg>");

  --transition-base: 200ms cubic-bezier(0.32, 0.72, 0.18, 1);
  --transition-quick: 120ms cubic-bezier(0.32, 0.72, 0.18, 1);
}

/* ─── Dark mode (design handoff: themes.css) ──────────────────────────
   Toggled by setting data-palette="dark" on <html>; everything below
   retints the token system, the rest of the CSS adapts via the vars.
   --color-white doubles as the raised-surface color, so it goes dark too. */
[data-palette="dark"] {
  color-scheme: dark;

  /* ≈ #181A1C — mirrored as the dark theme-color in the layout's pre-paint
     script and theme_controller's THEME_COLORS */
  --color-bone:       oklch(0.215 0.006 260);
  --color-bone-deep:  oklch(0.280 0.007 260);
  --color-cream:      oklch(0.255 0.007 260);
  --color-cream-soft: oklch(0.185 0.006 260);
  --color-ink:        oklch(0.930 0.004 90);
  --color-ink-soft:   oklch(0.840 0.005 90);
  --color-graphite:   oklch(0.660 0.008 250);
  --color-stone:      oklch(0.500 0.010 250);
  --color-mist:       oklch(0.340 0.008 255);
  --color-fog:        oklch(0.300 0.008 255);
  --color-white:      oklch(0.255 0.007 260);

  --hero-glow:    oklch(0.270 0.014 260);
  --hero-glow-2:  oklch(0.245 0.010 260);

  --color-accent:        oklch(0.78 0.10 185);
  --color-accent-deep:   oklch(0.84 0.09 185);
  --color-accent-soft:   oklch(0.68 0.09 185);
  --color-accent-tint:   oklch(0.78 0.10 185 / 0.14);

  --color-sage:        oklch(0.74 0.08 150);
  --color-sage-deep:   oklch(0.80 0.08 150);
  --color-sage-tint:   oklch(0.74 0.08 150 / 0.15);

  --color-error:        oklch(0.70 0.16 30);
  --color-error-dark:   oklch(0.76 0.14 30);
  --color-error-light:  oklch(0.62 0.16 30);
  --color-warning:      oklch(0.78 0.11 80);
  --gcal-tint:          oklch(0.72 0.09 245);

  /* The light shadows are near-black on near-white; against dark surfaces
     they vanish, so the dark ramp anchors on black and goes heavier. */
  --box-shadow-thin: 0 1px 2px oklch(0 0 0 / 0.35);
  --box-shadow-base: 0 1px 2px oklch(0 0 0 / 0.4), 0 4px 16px -8px oklch(0 0 0 / 0.5);
  --box-shadow-lift: 0 2px 4px oklch(0 0 0 / 0.45), 0 12px 32px -12px oklch(0 0 0 / 0.6);
  --box-shadow-card: 0 1px 0 var(--color-bone-deep), 0 8px 24px -16px oklch(0 0 0 / 0.6);
  --box-shadow-focus: 0 0 0 3px oklch(0.78 0.10 185 / 0.25);
}

/* The paper-grain overlay multiplies dark noise over the paper — over a dark
   surface that just muddies toward black, so drop it. */
[data-palette="dark"] body::before { display: none; }

[data-palette="dark"] *::-webkit-scrollbar-thumb {
  background: oklch(0.45 0.01 250 / 0.6);
  background-clip: padding-box;
}

/* Lexxy ships a light-only ink ramp in lexxy-variables.css, which loads
   after this file — html[data-palette] outranks its :root block. */
html[data-palette="dark"] {
  --lexxy-color-ink: oklch(93% 0.004 90);
  --lexxy-color-ink-medium: oklch(78% 0.006 250);
  --lexxy-color-ink-light: oklch(62% 0.008 250);
  --lexxy-color-ink-lighter: oklch(34% 0.008 255);
  --lexxy-color-ink-lightest: oklch(28% 0.007 260);
  --lexxy-color-ink-inverted: oklch(21.5% 0.006 260);
  --lexxy-color-accent-light: oklch(42% 0.06 254);
  --lexxy-color-accent-lightest: oklch(34% 0.05 254);
  --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Kill transitions while the palette flips so `transition: background`
   rules don't freeze mid-change. */
.theme-snap *,
.theme-snap *::before,
.theme-snap *::after {
  transition: none !important;
}

/* ─── Type — Grotesk (design handoff: themes.css) ─────────────────────
   Set via data-type="grotesk" on <html> in the app layout; the marketing
   layout keeps the Fraunces/Geist stack. */
[data-type="grotesk"] {
  --font-display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

[data-type="grotesk"] .hero-title {
  font-variation-settings: normal;
  font-weight: var(--font-weight-bold);
  font-size: 2.375rem;
  letter-spacing: -0.035em;
}
[data-type="grotesk"] .rec-title {
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
}
[data-type="grotesk"] .topbar__mark-name,
[data-type="grotesk"] .topbar__mark-glyph {
  font-variation-settings: normal;
  font-weight: var(--font-weight-bold);
}
[data-type="grotesk"] .topbar__mark-name { letter-spacing: -0.02em; }

/* Toned-down labels: mono stays for clock times and counters only. */
[data-type="grotesk"] .eyebrow,
[data-type="grotesk"] .group-label .lbl,
[data-type="grotesk"] .day-tab .dt-label,
[data-type="grotesk"] .rec-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.09em;
}
[data-type="grotesk"] .group-label .lbl.mono {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-regular);
}