/* =====================================================================
   Design tokens. Every component reads ONLY these custom properties, so
   one component set looks completely different per theme.

   Switch theme:  <body data-theme="perry|errin|shared">
   Switch mode:   data-mode="light|dark" (set by the mode toggle; when it
                  is absent each theme uses its default: Perry dark, Errin
                  light, Shared follows prefers-color-scheme).
   Tokens also work on any element, e.g. the hub cards carry data-theme.
   ===================================================================== */

@font-face { font-family: "Sora"; src: url("../fonts/sora.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  /* Person colours are constant across every theme. */
  --person-perry: #22D3EE;
  --person-errin: #F472B6;
  --person-joint: #A78BFA;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: 240ms;
  --dur-slow: 900ms;
  --tap: 44px;
}

/* ---------------------------------------------------------------------
   PERRY — "cool": a sleek, precise instrument panel. Dark first.
   --------------------------------------------------------------------- */
[data-theme="perry"] {
  color-scheme: dark;
  --bg: #0B1018;
  --surface: #121A26;
  --surface-2: #1A2434;
  --border: #26334A;
  --text: #E6EEF8;
  --muted: #8BA0BA;
  --accent: #22D3EE;
  --accent-2: #7DD3FC;
  --accent-3: #8B5CF6;
  --accent-text: #22D3EE;
  --on-accent: #06121A;
  --ok: #34D399;
  --warn: #F5B83D;
  --danger: #FF5C6C;
  --chart-1: #22D3EE; --chart-2: #8B5CF6; --chart-3: #7DD3FC; --chart-4: #38BDF8;
  --chart-5: #A78BFA; --chart-6: #2DD4BF; --chart-7: #6366F1; --chart-8: #94A3B8;
  --grid: rgba(139, 160, 186, .12);
  --glow: 0 0 12px rgba(34, 211, 238, .45);

  --font-head: "Sora", system-ui, sans-serif;
  --font-body: "Sora", system-ui, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, monospace;
  --head-weight: 600;
  --num-weight: 600;
  --headline-size: clamp(2.4rem, 7vw, 3.6rem);

  --radius: 8px;
  --radius-lg: 10px;
  --radius-btn: 6px;
  --border-w: 1px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lift: 0 0 0 1px rgba(34, 211, 238, .35), 0 12px 32px rgba(0, 0, 0, .5);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 0 14px rgba(34, 211, 238, .55);
  --divider: 1px solid var(--border);
  --page-texture:
    linear-gradient(rgba(139, 160, 186, .045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(139, 160, 186, .045) 1px, transparent 1px) 0 0 / 28px 28px;
  --progress-h: 8px;
  --progress-radius: 2px;
  --progress-fill: linear-gradient(90deg, #7DD3FC, #22D3EE);
  --progress-track: #1A2434;
  --chip-radius: 4px;
  --heat-0: #1A2434;
  --heat-rgb: 34, 211, 238;
  --header-line: linear-gradient(90deg, var(--accent), transparent 70%);
}
[data-theme="perry"][data-mode="light"] {
  color-scheme: light;
  --bg: #EEF3F8;
  --surface: #FFFFFF;
  --surface-2: #F4F8FC;
  --border: #D3DDEA;
  --text: #0F1A2A;
  --muted: #5C6B85;
  --accent: #0E7490;
  --accent-2: #0369A1;
  --accent-3: #7C3AED;
  --accent-text: #0E7490;
  --on-accent: #FFFFFF;
  --ok: #047857;
  --warn: #B45309;
  --danger: #DC2626;
  --chart-1: #0891B2; --chart-2: #7C3AED; --chart-3: #0284C7; --chart-4: #0E7490;
  --chart-5: #8B5CF6; --chart-6: #0D9488; --chart-7: #4F46E5; --chart-8: #64748B;
  --grid: rgba(15, 26, 42, .08);
  --glow: 0 0 8px rgba(8, 145, 178, .3);
  --shadow: 0 1px 2px rgba(15, 26, 42, .06), 0 6px 18px rgba(15, 26, 42, .06);
  --shadow-lift: 0 0 0 1px rgba(8, 145, 178, .4), 0 12px 28px rgba(15, 26, 42, .14);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --page-texture:
    linear-gradient(rgba(15, 26, 42, .045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(15, 26, 42, .045) 1px, transparent 1px) 0 0 / 28px 28px;
  --progress-fill: linear-gradient(90deg, #0284C7, #0891B2);
  --progress-track: #E2EAF3;
  --heat-0: #E8EEF5;
  --heat-rgb: 8, 145, 178;
}

/* ---------------------------------------------------------------------
   ERRIN — "cute and pretty": a soft stationery planner. Light first.
   --------------------------------------------------------------------- */
[data-theme="errin"] {
  color-scheme: light;
  --bg: #FFF6F8;
  --surface: #FFFFFF;
  --surface-2: #FFEAF1;
  --border: #F6D3E0;
  --text: #4A3040;
  --muted: #86627A;          /* spec #9A7A8C deepened to pass WCAG AA on the background */
  --accent: #F472B6;
  --accent-2: #A78BFA;
  --accent-3: #6EE7B7;
  --accent-text: #B83C7A;    /* pink for text/links that passes AA */
  --on-accent: #3A1F30;
  --ok: #2F9E78;
  --warn: #C77A2E;
  --danger: #E05252;
  --mint: #6EE7B7; --peach: #FDBA8C; --butter: #FDE68A; --lavender: #A78BFA;
  --chart-1: #F9A8D4; --chart-2: #C4B5FD; --chart-3: #6EE7B7; --chart-4: #FDBA8C;
  --chart-5: #FDE68A; --chart-6: #93C5FD; --chart-7: #F472B6; --chart-8: #A78BFA;
  --chart-9: #FCA5A5; --chart-10: #99F6E4;
  --grid: rgba(74, 48, 64, .07);
  --glow: none;

  --font-head: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --font-num: "Nunito", system-ui, sans-serif;
  --head-weight: 600;
  --num-weight: 800;
  --headline-size: clamp(2.4rem, 7vw, 3.4rem);

  --radius: 22px;
  --radius-lg: 26px;
  --radius-btn: 999px;
  --border-w: 1.5px;
  --shadow: 0 6px 20px rgba(244, 114, 182, .12), 0 2px 4px rgba(244, 114, 182, .08);
  --shadow-lift: 0 14px 34px rgba(244, 114, 182, .26), 0 3px 8px rgba(167, 139, 250, .15);
  --focus: 0 0 0 3px var(--bg), 0 0 0 6px #C4B5FD;
  --divider: 2px dotted var(--border);
  --page-texture: radial-gradient(circle at 1px 1px, rgba(244, 114, 182, .14) 1.2px, transparent 1.4px) 0 0 / 22px 22px;
  --progress-h: 22px;
  --progress-radius: 999px;
  --progress-fill: linear-gradient(90deg, #F9A8D4, #F472B6 45%, #A78BFA);
  --progress-track: #FFE1EC;
  --chip-radius: 999px;
  --heat-0: #FFF0F5;
  --heat-rgb: 244, 114, 182;
  --header-line: radial-gradient(circle, var(--border) 1.5px, transparent 1.6px) 0 0 / 10px 4px repeat-x;
}
[data-theme="errin"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #1E1424;
  --surface: #2A1E31;
  --surface-2: #35263D;
  --border: #4A3550;
  --text: #FBE8F1;
  --muted: #C4A9BC;
  --accent: #F9A8D4;
  --accent-2: #C4B5FD;
  --accent-3: #A7F3D0;
  --accent-text: #F9A8D4;
  --on-accent: #2A1020;
  --ok: #86EFAC;
  --warn: #FCD34D;
  --danger: #FCA5A5;
  --chart-1: #F9A8D4; --chart-2: #C4B5FD; --chart-3: #A7F3D0; --chart-4: #FED7AA;
  --chart-5: #FEF08A; --chart-6: #BFDBFE; --chart-7: #F472B6; --chart-8: #A78BFA;
  --chart-9: #FECACA; --chart-10: #99F6E4;
  --grid: rgba(251, 232, 241, .08);
  --shadow: 0 6px 20px rgba(0, 0, 0, .3), 0 0 0 1px rgba(249, 168, 212, .05);
  --shadow-lift: 0 14px 34px rgba(0, 0, 0, .4), 0 0 24px rgba(249, 168, 212, .15);
  --page-texture: radial-gradient(circle at 1px 1px, rgba(249, 168, 212, .1) 1.2px, transparent 1.4px) 0 0 / 22px 22px;
  --progress-track: #3A2A42;
  --heat-0: #2F2236;
  --heat-rgb: 249, 168, 212;
}

/* ---------------------------------------------------------------------
   SHARED — "us": calm neutral base, both people as accents.
   Follows prefers-color-scheme unless the toggle overrides it.
   --------------------------------------------------------------------- */
[data-theme="shared"] {
  color-scheme: light;
  --bg: #F7F5FB;
  --surface: #FFFFFF;
  --surface-2: #F1EEF8;
  --border: #E4DFF0;
  --text: #2A2438;
  --muted: #6E6486;          /* spec #7A7090 deepened slightly to pass AA */
  --accent: #A78BFA;
  --accent-2: #22D3EE;
  --accent-3: #F472B6;
  --accent-text: #6D4FD6;
  --on-accent: #1E1830;
  --ok: #059669;
  --warn: #C2410C;
  --danger: #DC2626;
  --chart-1: #A78BFA; --chart-2: #22D3EE; --chart-3: #F472B6; --chart-4: #818CF8;
  --chart-5: #67E8F9; --chart-6: #F9A8D4; --chart-7: #C4B5FD; --chart-8: #94A3B8;
  --grid: rgba(42, 36, 56, .07);
  --glow: none;

  --font-head: "Sora", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --font-num: "Nunito", system-ui, sans-serif;
  --head-weight: 600;
  --num-weight: 800;
  --headline-size: clamp(1.6rem, 5vw, 2.2rem);

  --radius: 14px;
  --radius-lg: 16px;
  --radius-btn: 10px;
  --border-w: 1px;
  --shadow: 0 2px 6px rgba(124, 92, 220, .06), 0 10px 26px rgba(124, 92, 220, .08);
  --shadow-lift: 0 16px 36px rgba(124, 92, 220, .18);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px #8B6CF0;
  --divider: 1px solid var(--border);
  --page-texture: none;
  --progress-h: 18px;
  --progress-radius: 9px;
  --progress-fill: var(--accent);
  --progress-track: #EEEAF6;
  --chip-radius: 8px;
  --heat-0: #EEEAF6;
  --heat-rgb: 167, 139, 250;
  --header-line: linear-gradient(90deg, var(--person-perry), var(--person-joint) 50%, var(--person-errin));
}
@media (prefers-color-scheme: dark) {
  [data-theme="shared"]:not([data-mode="light"]) {
    color-scheme: dark;
    --bg: #14111C; --surface: #1C1828; --surface-2: #252034; --border: #332C46;
    --text: #EEEAF6; --muted: #A79DC0; --accent-text: #C4B5FD; --on-accent: #1E1830;
    --ok: #34D399; --warn: #FDBA74; --danger: #F87171;
    --grid: rgba(238, 234, 246, .07);
    --shadow: 0 10px 26px rgba(0, 0, 0, .35); --shadow-lift: 0 16px 36px rgba(0, 0, 0, .5), 0 0 0 1px rgba(167, 139, 250, .3);
    --focus: 0 0 0 2px var(--bg), 0 0 0 4px #C4B5FD;
    --progress-track: #2A2440; --heat-0: #252034;
  }
}
[data-theme="shared"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #14111C; --surface: #1C1828; --surface-2: #252034; --border: #332C46;
  --text: #EEEAF6; --muted: #A79DC0; --accent-text: #C4B5FD; --on-accent: #1E1830;
  --ok: #34D399; --warn: #FDBA74; --danger: #F87171;
  --grid: rgba(238, 234, 246, .07);
  --shadow: 0 10px 26px rgba(0, 0, 0, .35); --shadow-lift: 0 16px 36px rgba(0, 0, 0, .5), 0 0 0 1px rgba(167, 139, 250, .3);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px #C4B5FD;
  --progress-track: #2A2440; --heat-0: #252034;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-slow: 0ms; }
}