/* ===========================
   Canbeasy colour themes — the ONLY place a colour value lives.
   Paper (light) and Midnight (dark), plus the light/dark pair of every other
   style (Glass, Cozy, Focus — see STYLES below). Every sheet (index.css,
   mobile.css, controls.css, account.css, stats.css, style-presets.css) reads
   these tokens; never write a raw colour anywhere else — add a token here first.

   Roles (keep them strict):
   - --accent: primary actions, links, focus rings, active/selected states. Nothing else.
   - --success / --warning / --danger: status only — done, processing/caution, errors
     (Context Vault states included). Never decoration.
   - Everything decorative is neutral: --surface*, --border*, --text*.

   Contrast (WCAG AA, re-checked 2026-10-09 after the punchier-colour pass): the base pairs below were verified for
   --text, --text-muted, --accent and each status colour on --bg, --surface,
   --surface-hover and their own --*-dim tint; --on-accent on every filled status.
   Values marked "AA:" were nudged from the spec value because it fell under 4.5:1.
   Theme selection: src/theme.js (+ the pre-paint script public/theme-init.js).
   =========================== */

/* PAPER (light) — the base :root also serves as the no-JS fallback. */
:root,
[data-theme="light"] {
  --bg: #FAF8F5;
  --surface: #FFFFFF;
  --surface-hover: #F3F0EB;
  --border: #DCD6CC;        /* legibility: card edges and rules read at a glance */
  --text: #181B20;
  --text-muted: #525967;    /* legibility: ~6.5:1 on --surface (was #636A77; spec #6B7280 failed AA)*/
  --accent: #0F4FF0;        /* punchier electric blue; AA on its own --accent-dim tint */
  --accent-hover: #0A3FCC;
  --on-accent: #FFFFFF;
  --success: #036C2B;       /* AA on the stronger --tint wash (spec #16A34A was 3.3:1 on white) */
  --warning: #954500;       /* AA on the stronger --tint wash (spec #D97706 was 3.2:1 on white) */
  --danger: #BD0D1A;        /* AA on the stronger --tint wash (spec #DC2626 was 4.25:1) */

  /* Tint strength for every --*-dim wash (kept low enough that status text
     on its own tint still clears 4.5:1). */
  --tint: 13%;
  /* A filled "caution" segment: the spec's bright amber, with ink text. */
  --warning-fill: #F28A00;
  --on-warning-fill: #181B20;

  --shadow-ink: #1F2328;
  --shadow-soft: 0 1px 0 rgba(31, 35, 40, 0.05);
  --shadow-float: 0 12px 18px rgba(31, 35, 40, 0.06);
  --shadow-card: 0 14px 24px rgba(31, 35, 40, 0.06);
  --shadow-card-hover: 0 20px 30px rgba(31, 35, 40, 0.09);
  --shadow-popover: 0 24px 40px rgba(31, 35, 40, 0.14);
  --glow: 0 1px 2px rgba(31, 35, 40, 0.06), 0 14px 34px rgba(31, 35, 40, 0.1);
  --scrim-bg: rgba(15, 23, 42, 0.5);
  --sheen-top: inset 0 1px 0 var(--wash-strong);
  --sheen-top-soft: inset 0 1px 0 var(--wash-soft);
  --paper-grain-opacity: 0.18;
  --paper-grain-blend: multiply;
  /* A style's page backdrop (Glass's colour field, Cozy's dot grid). Planner
     has none — its paper grain lives in body::before. */
  --backdrop: none;

  /* Labels laid over photos (scan thumbnails): a frosted chip in the theme's own
     colours, dense enough to stay AA on a black or a white photo. */
  --media-scrim: rgba(250, 248, 245, 0.88);
  --on-media: #181B20;

  /* The theme toggle previews the OTHER theme on hover. */
  --preview-bg: #0F172A;
  --preview-text: #EEF2F7;
  --preview-border: #52627A;
  --preview-surface: #1E293B; /* the other theme's --surface, for toggles on a card */

  /* Course identity colours (dots, spines, bars — never text). Each clears 3:1
     on --surface; none is the accent blue, so a course never reads as a button. */
  --course-1: #0891B2;
  --course-2: #EA580C;
  --course-3: #16A34A;
  --course-4: #C27C00;
  --course-5: #7C3AED;
  --course-6: #0D9488;
  --course-7: #DB2777;
  --course-8: #5E9A0C;
  --course-9: #B45309;
  --course-10: #4F46E5;

  /* Google's sign-in button is Google-branded, not ours (their brand rules). */
  --google-button-bg: #FFFFFF;
  --google-button-text: #1F1F1F;
  --google-button-border: #747775;

  color-scheme: light;
}

/* MIDNIGHT (dark) */
[data-theme="dark"] {
  --bg: #0F172A;
  --surface: #1E293B;
  --surface-hover: #273549;
  --border: #3D4C63;        /* legibility: card edges hold up on slate */
  --text: #EEF2F7;
  --text-muted: #AAB6C6;    /* legibility: ~7.5:1 on --surface (was #94A3B8) */
  --accent: #6AAAFF;
  --accent-hover: #8CBEFF;
  --on-accent: #0F172A;
  --success: #2EE59D;
  --warning: #FFC53D;
  --danger: #FF7D7D;        /* AA on --danger-dim over --surface (spec #F87171 was 4.49:1) */

  --tint: 14%;
  --warning-fill: var(--warning);
  --on-warning-fill: #0F172A;

  --shadow-ink: #020617;
  --shadow-soft: 0 1px 0 rgba(2, 6, 23, 0.3);
  --shadow-float: 0 12px 18px rgba(2, 6, 23, 0.26);
  --shadow-card: 0 14px 24px rgba(2, 6, 23, 0.28);
  --shadow-card-hover: 0 20px 30px rgba(2, 6, 23, 0.36);
  --shadow-popover: 0 24px 40px rgba(2, 6, 23, 0.44);
  --glow: 0 1px 2px rgba(2, 6, 23, 0.34), 0 18px 42px rgba(2, 6, 23, 0.4);
  --scrim-bg: rgba(2, 6, 23, 0.72);
  --sheen-top: 0 0 0 0 transparent;
  --sheen-top-soft: 0 0 0 0 transparent;
  --paper-grain-opacity: 0.06;
  --paper-grain-blend: screen;
  --backdrop: none;

  --media-scrim: rgba(15, 23, 42, 0.8);
  --on-media: #EEF2F7;

  --preview-bg: #FAF8F5;
  --preview-text: #181B20;
  --preview-border: #BDB6AA;
  --preview-surface: #FFFFFF;

  --course-1: #22D3EE;
  --course-2: #FF8A3D;
  --course-3: #3DE87A;
  --course-4: #FFD21F;
  --course-5: #A98BFF;
  --course-6: #2EE6C8;
  --course-7: #FF6BB5;
  --course-8: #B0F03A;
  --course-9: #F0A462;
  --course-10: #8A93FF;

  --google-button-bg: #131314;
  --google-button-text: #E3E3E3;
  --google-button-border: #8E918F;

  color-scheme: dark;
}

/* ===========================
   STYLES — the second axis beside light/dark (Settings → Style; src/theme.js
   sets data-style on <html>). Planner is the Paper/Midnight pair above. Each
   other style re-colours both modes here; its type, shape and signature
   details live in src/style-presets.css. Compound selectors only, so the
   Settings preview tiles (which carry their own data-style + data-theme) get
   their own palette. Every pair is in the AA check:
   node tools/verify/verify-theme-contrast.mjs (all four styles, both modes).
   =========================== */

/* GLASS — Apple's Liquid Glass. What makes it read as glass on an iPhone is
   what sits BEHIND it, so the page gets one quiet wallpaper: a single blue
   hue in a few depths (no rainbow), fixed so cards slide over its light and
   shade as you scroll. Every panel is a layer of glass on it: see-through,
   blurred, a rim of light lit from the top-left (Apple's specular highlight),
   an inner glow for thickness, and a soft shadow. The floating controls are
   the clearest glass (style-presets.css). Text sits on a fill dense enough to stay AA over the
   deepest and the brightest point of the wallpaper (verify-theme-contrast). */
[data-style="glass"][data-theme="light"] {
  --bg: #DCE6F3;
  --surface: rgba(255, 255, 255, 0.56);
  --surface-hover: rgba(255, 255, 255, 0.76);
  --border: rgba(255, 255, 255, 0.55);
  --text: #0A0F18;
  --text-muted: #3D4454;
  --accent: #00489F;
  --accent-hover: #003A82;
  --on-accent: #FFFFFF;
  --success: #055A24;
  --warning: #723800;
  --danger: #A0142A;
  --tint: 12%;
  --warning-fill: #F5A524;
  --on-warning-fill: #0A0F18;

  --shadow-ink: #12305A;
  /* Specular rim (bright top-left, fainter bottom-right), inner glow for the
     glass's thickness, then lift. */
  --shadow-soft: inset 1px 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(18, 48, 90, 0.08);
  --shadow-card: inset 1.5px 1.5px 1px -0.5px rgba(255, 255, 255, 0.95), inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.7), inset 0 0 14px rgba(255, 255, 255, 0.32), 0 10px 30px rgba(18, 48, 90, 0.12);
  --shadow-card-hover: inset 1.5px 1.5px 1px -0.5px #FFFFFF, inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.8), inset 0 0 18px rgba(255, 255, 255, 0.42), 0 16px 40px rgba(18, 48, 90, 0.16);
  --shadow-float: inset 1.5px 1.5px 1px -0.5px #FFFFFF, inset -1.5px -1.5px 1px -0.5px rgba(255, 255, 255, 0.8), inset 0 0 16px rgba(255, 255, 255, 0.45), 0 10px 32px rgba(18, 48, 90, 0.18);
  --shadow-popover: inset 1.5px 1.5px 1px -0.5px #FFFFFF, inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.7), inset 0 0 18px rgba(255, 255, 255, 0.4), 0 24px 60px rgba(18, 48, 90, 0.26);
  --glow: inset 1.5px 1.5px 1px -0.5px #FFFFFF, inset 0 0 16px rgba(255, 255, 255, 0.4), 0 14px 34px rgba(18, 48, 90, 0.16);
  --scrim-bg: rgba(14, 30, 56, 0.3);
  --sheen-top: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --sheen-top-soft: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --paper-grain-opacity: 0;

  --media-scrim: rgba(255, 255, 255, 0.86);
  --on-media: #0A0F18;
  --preview-bg: #04070D;
  --preview-text: #F2F5FA;
  --preview-border: #4A5670;
  --preview-surface: #141B2A;

  /* Glass-only: the rim, and the wallpaper — one blue in three depths. */
  --glass-edge: rgba(255, 255, 255, 0.7);
  --glass-1: #AFC8EA;   /* deep */
  --glass-2: #F3F7FD;   /* light */
  --glass-3: #C4D6EF;   /* mid */
  --topbar-bg: rgba(255, 255, 255, 0.34);
  --popover-bg: rgba(246, 249, 254, 0.78);
  --field-bg: rgba(255, 255, 255, 0.7);
  --ctl-fill-edge: inset 1px 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 8px rgba(255, 255, 255, 0.18), 0 4px 12px rgba(0, 60, 140, 0.22);
  --backdrop:
    radial-gradient(75% 65% at 0% 0%, var(--glass-1), transparent 70%),
    radial-gradient(60% 70% at 100% 25%, var(--glass-2), transparent 70%),
    radial-gradient(85% 60% at 35% 105%, var(--glass-3), transparent 70%),
    linear-gradient(160deg, #E6EEF8, #D2DFF0);
  color-scheme: light;
}
[data-style="glass"][data-theme="dark"] {
  --bg: #04070D;
  --surface: rgba(18, 22, 32, 0.56);
  --surface-hover: rgba(34, 40, 56, 0.66);
  --border: rgba(255, 255, 255, 0.12);
  --text: #F2F5FA;
  --text-muted: #AEB7C8;
  --accent: #7DBBFF;
  --accent-hover: #9CCBFF;
  --on-accent: #04101F;
  --success: #3DDB8C;
  --warning: #FFC94D;
  --danger: #FF9A9A;
  --tint: 16%;
  --warning-fill: #FFC94D;
  --on-warning-fill: #04070D;

  --shadow-ink: #000000;
  --shadow-soft: inset 1px 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card: inset 1.5px 1.5px 1px -0.5px rgba(255, 255, 255, 0.3), inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.12), inset 0 0 14px rgba(255, 255, 255, 0.05), 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: inset 1.5px 1.5px 1px -0.5px rgba(255, 255, 255, 0.4), inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.16), inset 0 0 18px rgba(255, 255, 255, 0.07), 0 18px 44px rgba(0, 0, 0, 0.55);
  --shadow-float: inset 1.5px 1.5px 1px -0.5px rgba(255, 255, 255, 0.42), inset -1.5px -1.5px 1px -0.5px rgba(255, 255, 255, 0.16), inset 0 0 16px rgba(255, 255, 255, 0.08), 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-popover: inset 1.5px 1.5px 1px -0.5px rgba(255, 255, 255, 0.36), inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.12), inset 0 0 18px rgba(255, 255, 255, 0.06), 0 24px 60px rgba(0, 0, 0, 0.6);
  --glow: inset 1.5px 1.5px 1px -0.5px rgba(255, 255, 255, 0.36), inset 0 0 16px rgba(255, 255, 255, 0.06), 0 18px 42px rgba(0, 0, 0, 0.5);
  --scrim-bg: rgba(0, 0, 0, 0.5);
  --sheen-top: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --sheen-top-soft: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --paper-grain-opacity: 0;

  --media-scrim: rgba(4, 7, 13, 0.82);
  --on-media: #F2F5FA;
  --preview-bg: #DCE6F3;
  --preview-text: #0A0F18;
  --preview-border: #8A9BB5;
  --preview-surface: #FFFFFF;

  --glass-edge: rgba(255, 255, 255, 0.2);
  --glass-1: #12305E;   /* deep blue */
  --glass-2: #0B1D3B;   /* night */
  --glass-3: #0E2547;   /* mid */
  --topbar-bg: rgba(40, 48, 66, 0.36);
  --popover-bg: rgba(22, 28, 42, 0.82);
  --field-bg: rgba(6, 10, 18, 0.5);
  --ctl-fill-edge: inset 1px 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 8px rgba(255, 255, 255, 0.16), 0 4px 14px rgba(0, 0, 0, 0.4);
  --backdrop:
    radial-gradient(75% 65% at 0% 0%, var(--glass-1), transparent 70%),
    radial-gradient(60% 70% at 100% 25%, var(--glass-2), transparent 70%),
    radial-gradient(85% 60% at 35% 105%, var(--glass-3), transparent 70%),
    linear-gradient(160deg, #060B16, #03060C);
  color-scheme: dark;
}
/* Reduce transparency or Increase contrast on the device: Glass goes solid,
   as Apple's own glass does, and every panel edge gets a real line. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  [data-style="glass"][data-theme="light"] {
    --surface: #F8FAFD;
    --surface-hover: #FFFFFF;
    --border: #A9B4C6;
    --glass-edge: #A9B4C6;
    --topbar-bg: #F3F6FB;
    --popover-bg: #FFFFFF;
    --field-bg: #FFFFFF;
  }
  [data-style="glass"][data-theme="dark"] {
    --surface: #151B29;
    --surface-hover: #212A3B;
    --border: #46526A;
    --glass-edge: #46526A;
    --topbar-bg: #101624;
    --popover-bg: #151B29;
    --field-bg: #0D1220;
  }
}

/* COZY — soft and rounded: strawberry-milk paper by day, a plum café at
   night. One berry accent; a faint bullet-journal dot grid behind it all. */
[data-style="cozy"][data-theme="light"] {
  --bg: #F9F1F5;
  --surface: #FFFFFF;
  --surface-hover: #F8EAF1;
  --border: #EAD5E0;
  --text: #2D2130;
  --text-muted: #67536C;
  --accent: #A8296E;
  --accent-hover: #8C1F5A;
  --on-accent: #FFFFFF;
  --success: #1A7240;
  --warning: #864500;
  --danger: #B3211A;
  --tint: 12%;
  --warning-fill: #FFB547;
  --on-warning-fill: #2D2130;

  --shadow-ink: #3A2340;
  /* The "sticker" ledge: a solid soft edge under every card and button. */
  --shadow-soft: 0 2px 0 rgba(150, 80, 125, 0.1);
  --shadow-float: 0 3px 0 rgba(150, 80, 125, 0.1), 0 14px 26px rgba(120, 50, 95, 0.1);
  --shadow-card: 0 3px 0 #EDD9E4, 0 14px 30px rgba(120, 50, 95, 0.07);
  --shadow-card-hover: 0 4px 0 #E6CADA, 0 20px 36px rgba(120, 50, 95, 0.12);
  --shadow-popover: 0 4px 0 #EDD9E4, 0 26px 48px rgba(90, 35, 75, 0.18);
  --glow: 0 3px 0 #EDD9E4, 0 14px 34px rgba(120, 50, 95, 0.12);
  --scrim-bg: rgba(45, 33, 48, 0.42);
  --sheen-top: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  /* Outlined controls stand on the same ledge, and sink into it when pressed. */
  --sheen-top-soft: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 0 #EAD5E0;
  --ctl-fill-edge: 0 3px 0 #741A4B;
  --shadow-accent: 0 3px 0 #741A4B, 0 10px 20px rgba(168, 41, 110, 0.24);
  --paper-grain-opacity: 0;

  --media-scrim: rgba(249, 241, 245, 0.9);
  --on-media: #2D2130;
  --preview-bg: #1C1620;
  --preview-text: #F8EEF5;
  --preview-border: #6A5670;
  --preview-surface: #292030;

  --backdrop: radial-gradient(circle, rgba(168, 41, 110, 0.17) 1.2px, transparent 1.7px) 0 0 / 22px 22px;
  color-scheme: light;
}
[data-style="cozy"][data-theme="dark"] {
  --bg: #1C1620;
  --surface: #292030;
  --surface-hover: #34293C;
  --border: #4B3D52;
  --text: #F8EEF5;
  --text-muted: #C8B5C8;
  --accent: #FFA3D0;
  --accent-hover: #FFC0DF;
  --on-accent: #2B0E1E;
  --success: #82E3A8;
  --warning: #FFD074;
  --danger: #FF8E80;
  --tint: 15%;
  --warning-fill: #FFD074;
  --on-warning-fill: #1C1620;

  --shadow-ink: #0B070D;
  --shadow-soft: 0 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-float: 0 3px 0 rgba(0, 0, 0, 0.3), 0 14px 26px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 3px 0 #120D15, 0 14px 30px rgba(0, 0, 0, 0.28);
  --shadow-card-hover: 0 4px 0 #120D15, 0 20px 36px rgba(0, 0, 0, 0.36);
  --shadow-popover: 0 4px 0 #120D15, 0 26px 48px rgba(0, 0, 0, 0.5);
  --glow: 0 3px 0 #120D15, 0 18px 42px rgba(0, 0, 0, 0.4);
  --scrim-bg: rgba(10, 6, 12, 0.66);
  --sheen-top: 0 0 0 0 transparent;
  --sheen-top-soft: 0 2px 0 #120D15;
  --ctl-fill-edge: 0 3px 0 #B5638D;
  --shadow-accent: 0 3px 0 #B5638D, 0 10px 22px rgba(0, 0, 0, 0.35);
  --paper-grain-opacity: 0;

  --media-scrim: rgba(28, 22, 32, 0.84);
  --on-media: #F8EEF5;
  --preview-bg: #F9F1F5;
  --preview-text: #2D2130;
  --preview-border: #C9AFBE;
  --preview-surface: #FFFFFF;

  --backdrop: radial-gradient(circle, rgba(255, 163, 208, 0.1) 1.2px, transparent 1.7px) 0 0 / 22px 22px;
  color-scheme: dark;
}

/* FOCUS — clarity first: black and white, bigger letters, nothing extra.
   Selected and current things get a highlighter swipe (the one colour). */
[data-style="focus"][data-theme="light"] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-hover: #F0F0EB;
  --border: #8A8A8A;        /* every edge reads (3.4:1), no shadow needed */
  --text: #0A0A0A;
  --text-muted: #383838;
  --accent: #0A0A0A;        /* ink: primary buttons, links (underlined), focus */
  --accent-hover: #333333;
  --on-accent: #FFFFFF;
  --success: #00662A;
  --warning: #814100;
  --danger: #AD0019;
  --tint: 11%;
  --warning-fill: #FFC21A;
  --on-warning-fill: #0A0A0A;

  --shadow-ink: transparent; /* flat: every ink-tinted shadow in the sheets drops out */
  --shadow-soft: 0 0 0 0 transparent;
  --shadow-float: 0 0 0 0 transparent;
  --shadow-card: 0 0 0 0 transparent;
  --shadow-card-hover: 0 0 0 0 transparent;
  --shadow-popover: 0 0 0 2px #0A0A0A;
  --glow: 0 0 0 0 transparent;
  --scrim-bg: rgba(0, 0, 0, 0.45);
  --sheen-top: 0 0 0 0 transparent;
  --sheen-top-soft: 0 0 0 0 transparent;
  --paper-grain-opacity: 0;

  --media-scrim: rgba(255, 255, 255, 0.92);
  --on-media: #0A0A0A;
  --preview-bg: #0A0A0A;
  --preview-text: #FFFFFF;
  --preview-border: #7C7C7C;
  --preview-surface: #141414;

  /* Focus-only: the highlighter. Replaces the accent tint behind
     selected/current states and text selection. */
  --highlight: #FFE45E;
  --accent-dim: var(--highlight);
  --selection-bg: var(--highlight);
  --shadow-accent: 0 0 0 0 transparent;
  color-scheme: light;
}
[data-style="focus"][data-theme="dark"] {
  --bg: #0A0A0A;
  --surface: #141414;
  --surface-hover: #242424;
  --border: #7C7C7C;
  --text: #FFFFFF;
  --text-muted: #D2D2D2;
  --accent: #FFFFFF;
  --accent-hover: #DADADA;
  --on-accent: #0A0A0A;
  --success: #5DE391;
  --warning: #FFD447;
  --danger: #FF8F8F;
  --tint: 18%;
  --warning-fill: #FFD447;
  --on-warning-fill: #0A0A0A;

  --shadow-ink: transparent; /* flat: every ink-tinted shadow in the sheets drops out */
  --shadow-soft: 0 0 0 0 transparent;
  --shadow-float: 0 0 0 0 transparent;
  --shadow-card: 0 0 0 0 transparent;
  --shadow-card-hover: 0 0 0 0 transparent;
  --shadow-popover: 0 0 0 2px #FFFFFF;
  --glow: 0 0 0 0 transparent;
  --scrim-bg: rgba(0, 0, 0, 0.75);
  --sheen-top: 0 0 0 0 transparent;
  --sheen-top-soft: 0 0 0 0 transparent;
  --paper-grain-opacity: 0;

  --media-scrim: rgba(10, 10, 10, 0.88);
  --on-media: #FFFFFF;
  --preview-bg: #FFFFFF;
  --preview-text: #0A0A0A;
  --preview-border: #8A8A8A;
  --preview-surface: #FFFFFF;

  --highlight: rgba(255, 228, 94, 0.3);
  --accent-dim: var(--highlight);
  --selection-bg: rgba(255, 228, 94, 0.42);
  --shadow-accent: 0 0 0 0 transparent;
  color-scheme: dark;
}

/* Derived tokens — computed from the base palette above, so they follow the
   active theme automatically. Re-declared on [data-theme] so any element that
   carries the attribute recomputes them against its own palette. */
:root,
[data-theme] {
  /* Surfaces: bg → surface → surface2 (inset well) → surface3 (hover) → surface4 (pressed/selected neutral) */
  --bg2: color-mix(in srgb, var(--bg) 60%, var(--surface-hover));
  --surface2: color-mix(in srgb, var(--surface) 50%, var(--surface-hover));
  --surface3: var(--surface-hover);
  --surface4: color-mix(in srgb, var(--surface-hover) 55%, var(--border));
  --field-bg: var(--surface);
  --popover-bg: var(--surface);
  --topbar-bg: color-mix(in srgb, var(--bg) 92%, transparent);

  /* Text tiers between --text and --text-muted (both ends pass AA, so these do). */
  --text2: color-mix(in srgb, var(--text) 45%, var(--text-muted));
  --text2-bright: color-mix(in srgb, var(--text) 72%, var(--text-muted));

  /* Lines. --border-strong clears 3:1 on --surface for field/control outlines. */
  --border-strong: color-mix(in srgb, var(--text-muted) 70%, var(--border));
  --rule: var(--border);

  /* Neutral washes (hover fills, sheens). */
  --ink-wash: color-mix(in srgb, var(--text) 6%, transparent);
  --wash-strong: color-mix(in srgb, var(--surface) 60%, transparent);
  --wash: color-mix(in srgb, var(--surface) 45%, transparent);
  --wash-soft: color-mix(in srgb, var(--surface) 34%, transparent);
  --wash-faint: color-mix(in srgb, var(--surface) 20%, transparent);
  --panel-tint: linear-gradient(135deg, var(--wash), transparent 45%);

  /* Accent family — actions, links, focus, active only. */
  --accent-dim: color-mix(in srgb, var(--accent) var(--tint), transparent);
  --accent-border-soft: color-mix(in srgb, var(--accent) 45%, transparent);
  --accent-border-strong: color-mix(in srgb, var(--accent) 60%, transparent);
  --focus-ring: color-mix(in srgb, var(--accent) 24%, transparent);
  --shadow-accent: 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
  --ctl-fill-edge: 0 0 0 0 transparent; /* filled buttons at rest; a style may add a rim or ledge */
  --selection-bg: color-mix(in srgb, var(--accent) 26%, transparent);

  /* Status family — done / processing / error only. */
  --success-dim: color-mix(in srgb, var(--success) var(--tint), transparent);
  --warning-dim: color-mix(in srgb, var(--warning) var(--tint), transparent);
  --danger-dim: color-mix(in srgb, var(--danger) var(--tint), transparent);
  --success-border: color-mix(in srgb, var(--success) 55%, transparent);
  --warning-border: color-mix(in srgb, var(--warning) 55%, transparent);
  --danger-border: color-mix(in srgb, var(--danger) 55%, transparent);
  --danger-hover: color-mix(in srgb, var(--danger) 82%, var(--text));

  /* Google's "G" mark: Google requires its own four colours in both themes. */
  --google-g-blue: #4285F4;
  --google-g-green: #34A853;
  --google-g-yellow: #FBBC05;
  --google-g-red: #EA4335;

  --paper-grain-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

/* One-frame freeze while switching themes (set by theme.js) so every colour
   swaps at once instead of cross-fading on its own transition. */
[data-theme-switching] *,
[data-theme-switching] *::before,
[data-theme-switching] *::after { transition: none !important; }

::selection { background: var(--selection-bg); }