/* Shop themes (Account#theme). Every theme sets the same palette tokens:
     surface-0  page background
     surface-1  cards and panels on the page
     surface-2  tiles and fields inside a card
     surface-3  hover and pressed fills, stronger chips
     text / muted / subtle  copy, secondary copy, hairlines
   The accent colour comes from the account (inline --color-accent).
   The tinted themes derive their surfaces from the accent's hue, capped in
   chroma so a neon accent still gives a calm page. */

/* The accent until the account's own arrives inline. Any accent an
   organizer picks has to read (WCAG 1.4.3, 4.5:1), so it comes in three
   forms, re-derived wherever an inline accent lands:
     --color-on-accent    black or white text on it: black from lightness
                          0.65 up, white below
     --color-accent-fill  the accent under text: a mid tone that takes white
                          darkens to lightness 0.55, just enough for 4.5:1;
                          a light one stays as it is and takes black
     --color-accent-text  the accent as text on the page: no lighter than
                          0.5 on a light scheme (yellow and cyan on the
                          cream paper theme need that), no darker than 0.7
                          on a dark one
   The steps use clamp((0.65 - l) * 1e6) as an if: 1 below 0.65, else 0. */
:root {
  --color-accent: oklch(0.5941 0.2343 253.06);
}

:root,
[data-theme] {
  --color-on-accent: oklch(from var(--color-accent) clamp(0, (0.65 - l) * 1e6, 1) 0 h);
  --color-accent-fill: oklch(from var(--color-accent) calc(l - clamp(0, (0.65 - l) * 1e6, 1) * max(0, l - 0.55)) c h);
  --color-accent-text: oklch(from var(--color-accent) min(l, 0.5) c h);
  --focus-ring-color: color-mix(in oklch, var(--color-accent) 45%, transparent);
}

[data-scheme="dark"] {
  --color-accent-text: oklch(from var(--color-accent) max(l, 0.7) c h);
}

/* Rich text (Lexxy) follows the theme, resolved wherever one lands: a
   variable set on :root alone would keep the colours of <html>'s theme */
:root,
[data-theme] {
  --lexxy-color-ink: var(--color-text);
  --lexxy-color-ink-medium: var(--color-muted);
  --lexxy-color-ink-light: var(--color-muted);
  --lexxy-color-ink-lighter: var(--color-subtle);
  --lexxy-color-ink-lightest: var(--color-surface-2);
  --lexxy-color-link: var(--color-accent-text);
  --lexxy-font-base: var(--font-body);
  --lexxy-font-mono: var(--font-mono);
  --lexxy-radius: var(--radius-s);
}

:root,
[data-theme="light"] {
  --color-text: oklch(0.18 0 0);
  --color-muted: oklch(0.47 0 0);
  --color-subtle: oklch(0.9 0 0);
  --color-surface-0: oklch(0.975 0 0);
  --color-surface-1: oklch(1 0 0);
  --color-surface-2: oklch(0.955 0 0);
  --color-surface-3: oklch(0.92 0 0);
  --color-green: oklch(0.6 0.15 150);
  --color-amber: oklch(0.7 0.15 75);
  --color-red: oklch(0.58 0.2 25);
  --shadow-card: 0 0 0 1px oklch(0 0 0 / 0.05), 0 1px 2px oklch(0 0 0 / 0.04), 0 8px 24px -12px oklch(0 0 0 / 0.12);
  color-scheme: light;
}

[data-theme="dark"] {
  --color-text: oklch(0.96 0 0);
  --color-muted: oklch(0.68 0 0);
  --color-subtle: oklch(0.29 0 0);
  --color-surface-0: oklch(0.11 0 0);
  --color-surface-1: oklch(0.17 0 0);
  --color-surface-2: oklch(0.22 0 0);
  --color-surface-3: oklch(0.27 0 0);
  --color-green: oklch(0.75 0.15 150);
  --color-amber: oklch(0.8 0.15 80);
  --color-red: oklch(0.7 0.17 25);
  --shadow-card: 0 0 0 1px oklch(1 0 0 / 0.06);
  color-scheme: dark;
}

[data-theme="paper"] {
  --color-text: oklch(0.24 0.02 60);
  --color-muted: oklch(0.5 0.025 60);
  --color-subtle: oklch(0.87 0.02 80);
  --color-surface-0: oklch(0.955 0.014 85);
  --color-surface-1: oklch(0.99 0.007 85);
  --color-surface-2: oklch(0.935 0.016 85);
  --color-surface-3: oklch(0.9 0.02 85);
  --color-green: oklch(0.58 0.13 150);
  --color-amber: oklch(0.68 0.14 70);
  --color-red: oklch(0.56 0.18 30);
  --shadow-card: 0 0 0 1px oklch(0.4 0.04 70 / 0.08), 0 1px 2px oklch(0.4 0.04 70 / 0.06), 0 8px 24px -12px oklch(0.4 0.04 70 / 0.16);
  color-scheme: light;
}

[data-theme="midnight"] {
  --color-text: oklch(0.96 0.01 265);
  --color-muted: oklch(0.74 0.035 265);
  --color-subtle: oklch(0.34 0.045 265);
  --color-surface-0: oklch(0.17 0.035 265);
  --color-surface-1: oklch(0.215 0.042 265);
  --color-surface-2: oklch(0.26 0.046 265);
  --color-surface-3: oklch(0.31 0.048 265);
  --color-green: oklch(0.77 0.14 155);
  --color-amber: oklch(0.82 0.14 80);
  --color-red: oklch(0.72 0.16 22);
  --shadow-card: 0 0 0 1px oklch(0.8 0.05 265 / 0.08);
  color-scheme: dark;
}

[data-theme="tinted_light"] {
  --color-text: oklch(from var(--color-accent) 0.24 min(c * 0.4, 0.06) h);
  --color-muted: oklch(from var(--color-accent) 0.47 min(c * 0.35, 0.06) h);
  --color-subtle: oklch(from var(--color-accent) 0.87 min(c * 0.3, 0.05) h);
  --color-surface-0: oklch(from var(--color-accent) 0.95 min(c * 0.25, 0.04) h);
  --color-surface-1: oklch(from var(--color-accent) 0.99 min(c * 0.08, 0.012) h);
  --color-surface-2: oklch(from var(--color-accent) 0.93 min(c * 0.3, 0.045) h);
  --color-surface-3: oklch(from var(--color-accent) 0.895 min(c * 0.35, 0.055) h);
  --color-green: oklch(0.58 0.14 150);
  --color-amber: oklch(0.68 0.14 70);
  --color-red: oklch(0.56 0.19 25);
  --shadow-card: 0 0 0 1px oklch(from var(--color-accent) 0.4 min(c, 0.1) h / 0.08), 0 8px 24px -12px oklch(from var(--color-accent) 0.35 min(c, 0.1) h / 0.2);
  color-scheme: light;
}

[data-theme="tinted_dark"] {
  --color-text: oklch(from var(--color-accent) 0.97 min(c * 0.08, 0.015) h);
  --color-muted: oklch(from var(--color-accent) 0.76 min(c * 0.25, 0.05) h);
  --color-subtle: oklch(from var(--color-accent) 0.36 min(c * 0.35, 0.07) h);
  --color-surface-0: oklch(from var(--color-accent) 0.17 min(c * 0.35, 0.055) h);
  --color-surface-1: oklch(from var(--color-accent) 0.22 min(c * 0.4, 0.065) h);
  --color-surface-2: oklch(from var(--color-accent) 0.27 min(c * 0.42, 0.07) h);
  --color-surface-3: oklch(from var(--color-accent) 0.32 min(c * 0.45, 0.075) h);
  --color-green: oklch(0.77 0.14 155);
  --color-amber: oklch(0.82 0.14 80);
  --color-red: oklch(0.72 0.16 22);
  --shadow-card: 0 0 0 1px oklch(from var(--color-accent) 0.85 min(c, 0.1) h / 0.08);
  color-scheme: dark;
}