// CSS Custom Properties (CSS Variables)
// This file defines all CSS variables used throughout the application.
//
// -----------------------------------------------------------------------------
// Naming taxonomy (when adding a new token, pick the family it belongs to):
//   --surface-{0..4}       → background ramp (deepest → highest layer)
//   --ink, --ink-strong,   → text colors
//   --ink-muted
//   --ink-on-channel       → RGB triplet (e.g. "0,0,0") for `rgba()` overlays
//   --separator, --divider → border / hairline tones
//   --scrim, --bg-overlay  → modal / wallpaper overlay tones
//   --brand, --focus-ring  → accent / focus surfaces (alias to Material palette)
//   --state-{hover,focus,
//   pressed,selected}-alpha,
//   --state-disabled-alpha → interaction-state opacity scalars
//   --c-* / --palette-*    → legacy + Material palette ladders (don't introduce
//                             new --c-* names; prefer the families above)
//
// Selector contract for theme authors:
//   Primitives MUST be overridden under `body` (light) or `body.isDarkTheme`
//   (dark). Declaring a primitive at `:root` only is mode-inconsistent —
//   `:root` (specificity 0,1,0) beats base `body` (0,0,1) but loses to
//   `body.isDarkTheme` (0,1,1), so the override silently fails in dark mode.
//   Semantic aliases live at `:where(body, body.isDarkTheme)` (specificity 0)
//   so any selector with non-zero specificity wins.
//
// File layout:
//   1. `:root` — primitive scales (palette stops, dark/light elevation,
//      shadows, motion, breakpoints, z-index, layout). Mode-independent.
//   2. `body` / `body.isDarkTheme` — Layer-1 PRIMITIVES (surface ramp, ink,
//      brand, separators, scrim, focus-ring). Values differ per mode.
//   3. `:where(body, body.isDarkTheme)` — Layer-2 SEMANTIC ALIASES + state
//      tokens. Declared once, reference primitives. Zero specificity so theme
//      overrides win.
//   4. `body` / `body.isDarkTheme` — Layer-3 CATEGORY-B tokens whose values
//      genuinely differ per mode and cannot be expressed via primitive aliasing.
// -----------------------------------------------------------------------------

@use 'fonts';

// ===============================
// CORE DESIGN TOKENS
// ===============================

:root {
  // -----------------------------
  // Safe Areas (iOS notch, home indicator)
  // Uses env() for native iOS safe areas
  // -----------------------------
  // `--android-status-bar-overlap` is fed natively (CapacitorMainActivity
  // .pushStatusBarOverlapBelowApi30) on the WebView < 140 tail, where
  // env(safe-area-inset-top) wrongly resolves to 0 under edge-to-edge (old
  // WebViews map only display cutouts into safe-area insets, not the status bar)
  // — #8508 / #8283 (Android 9 / API 28). It is 0 once the WebView is inset, so
  // max() never double-counts; on API >= 35 / WebView >= 140 the injected
  // --safe-area-inset-top wins via var() precedence and this fallback is ignored.
  // Declared 0px so the token is always defined (it is only ever overridden by
  // the native inline write on the affected tail).
  --android-status-bar-overlap: 0px;
  --safe-area-top: var(
    --safe-area-inset-top,
    max(env(safe-area-inset-top, 0px), var(--android-status-bar-overlap, 0px))
  );
  --safe-area-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --safe-area-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --safe-area-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));

  // Bottom clearance reserved by the mobile bottom nav and everything stacked
  // above it (scroll content, snackbars). Half the inset by default: iOS's home
  // indicator is thin and translucent, so a full inset reads as an oversized gap.
  // Native Android's system bars (3-button / gesture) are opaque and must be
  // cleared in full or the nav buttons draw under them (#8792) — overridden to
  // the full inset for native Android in styles.scss. Reads through the shared
  // --safe-area-bottom (not raw env()) so this tracks the same source as the
  // header/side-nav/body insets and all bottom-inset UI behaves uniformly across
  // SystemBars WebView bands. Caveat: on the narrow API >= 35 / WebView < 140
  // band the shared source can double-count vs SystemBars' native padding (a
  // cosmetic gap, not an overlap — see the device-matrix risks in
  // docs/plans/2026-06-22-android-systembars-migration-corrected.md).
  --bottom-nav-safe-area: calc(var(--safe-area-bottom) / 2);

  // Keyboard height (set dynamically via JS)
  --keyboard-height: 0px;
  --keyboard-overlay-offset: 0px;
  --visual-viewport-height: 100vh;

  // -----------------------------
  // Spacing System
  // -----------------------------
  --s: 8px;
  --s-quarter: 2px;
  --s-half: 4px;

  // -----------------------------
  // Fonts
  // -----------------------------
  // Lead with the native platform UI font (SF Pro on Apple, Segoe UI Variable
  // on Win 11, Roboto on Android). Inter/Open Sans are graceful fallbacks.
  // Sourced from styles/_fonts.scss so themes.scss can share the same list.
  --font-primary-stack: #{fonts.$primary-stack};
  --font-mono-stack:
    ui-monospace, 'SF Mono', 'JetBrains Mono', 'Fira Code', Menlo, Consolas,
    'Liberation Mono', 'Courier New', monospace;

  // Type scale
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 14px; // base
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 22px;
  --font-size-3xl: 28px;

  // Font weights — 400 is the browser default, so only non-default weights
  // are declared.
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  // Line heights (unitless so they scale with font-size)
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;

  // Letter spacing — modern UI tracking
  --letter-spacing-tighter: -0.02em;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;

  --s2: 16px; // 2 * 8px
  --s3: 24px; // 3 * 8px
  --s4: 32px; // 4 * 8px
  --s5: 40px; // 5 * 8px
  --s6: 48px; // 6 * 8px
  --s7: 56px; // 7 * 8px
  --s8: 64px; // 8 * 8px
  --s9: 72px; // 9 * 8px

  // -----------------------------
  // Layout System
  // -----------------------------
  // Breakpoints
  --layout-xxxs: 398px;
  --layout-xxs: 440px;
  --layout-xs: 600px;
  --layout-sm: 960px;
  --layout-md: 1280px;
  --layout-lg: 1920px;
  --layout-xl: 2000px;

  // Component dimensions
  --component-max-width: 800px;
  // Fluid focus-mode clock diameter — single source of truth for the clock
  // face and the focus-mode-main duration-slider overlay. vmin tracks the
  // smaller viewport dimension (clock is square), capped by vh so squat
  // windows don't push the task title / controls off-screen; floor keeps it
  // legible on tiny windows, ceiling stops it dominating 4K.
  --clock-face-size-default: clamp(180px, min(64vmin, 40vh), 640px);
  --side-nav-width-switch-mobile: 500px;
  --side-nav-width-switch-l: 1500px;
  --side-nav-width-mobile: calc(100vw - var(--s9));
  --side-nav-width: 200px;
  --side-nav-width-l: 400px;
  --bar-height-large: 56px;
  --bar-height: 48px;
  --bar-height-small: 40px;
  --mat-mini-fab-size: 48px;
  --mac-title-bar-padding: 20px;
  --vertical-action-bar-width: 48px;
  // Matches WCO_HEIGHT in electron/main-window.ts. Keep in sync so the
  // vertical action strip clears the WCO band by exactly this much on
  // Win/Linux with custom title bar.
  --wco-height: 24px;

  // Radius scale — use tokens below; legacy aliases kept for existing rules.
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;
  --card-border-radius: var(--radius-md);
  --window-controls-width: 140px; // Fallback for non-WCO contexts; main-header uses env() directly

  // Z-index layers
  --z-focus-mode-overlay: 101;
  --z-main-header-wrapper: 50;
  --z-side-nav: 60;
  --z-banner: 11;
  --z-main-header: 12;
  --z-celebrate: 102;
  --z-backdrop: 222;
  // NOTE needs to be below the z-index of cdk-overlay which is 1000
  --z-add-task-bar: 999;
  --z-search-bar: 999;
  --z-onboarding-presets: 999;
  --z-mobile-bottom-nav: 50;
  --z-right-panel: 44;
  --z-right-panel-resize-handle: 65;
  --z-right-panel-edge-handle: 66;
  --z-vertical-action-bar: 70;
  --z-tour: 1001;
  --z-onboarding-hint: 1100;
  --z-dragged-nav-item: 1002;
  --z-bg-overlay: 1;

  // ===============================
  // COLORS - Theme Independent
  // ===============================

  // -----------------------------
  // Semantic Colors
  // -----------------------------
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-danger: #f44336;
  --success-green: #4fa758;
  --sun-yellow: #fff400;

  // -----------------------------
  // Dark Theme Elevation Colors
  // -----------------------------
  --dark0: rgb(0, 0, 0);
  --dark0-5: rgb(26, 26, 26);
  --dark1: rgb(30, 30, 30);
  --dark2: rgb(34, 34, 34);
  --dark3: rgb(36, 36, 36);
  --dark4: rgb(39, 39, 39);
  --dark4-5: rgb(40, 40, 40);
  --dark5: rgb(42, 42, 42);
  --dark6: rgb(44, 44, 44);
  --dark8: rgb(46, 46, 46);
  --dark10: rgb(48, 48, 48);
  --dark12: rgb(51, 51, 51);
  --dark16: rgb(53, 53, 53);
  --dark24: rgb(56, 56, 56);

  // -----------------------------
  // Overlay Colors
  // -----------------------------
  --c-dark-10: rgba(0, 0, 0, 0.1);
  --c-dark-20: rgba(0, 0, 0, 0.2);
  --c-dark-30: rgba(0, 0, 0, 0.3);
  --c-dark-40: rgba(0, 0, 0, 0.4);
  --c-dark-50: rgba(0, 0, 0, 0.5);
  --c-dark-60: rgba(0, 0, 0, 0.6);
  --c-dark-80: rgba(0, 0, 0, 0.8);
  --c-dark-90: rgba(0, 0, 0, 0.9);
  --c-light-05: rgba(255, 255, 255, 0.05);
  --c-light-10: rgba(255, 255, 255, 0.1);
  --c-light-33: rgba(255, 255, 255, 0.33);
  --c-light-40: rgba(255, 255, 255, 0.4);
  --c-light-50: rgba(255, 255, 255, 0.5);
  --c-light-60: rgba(255, 255, 255, 0.6);
  --c-light-70: rgba(255, 255, 255, 0.7);
  --c-light-80: rgba(255, 255, 255, 0.8);
  --c-light-90: rgba(255, 255, 255, 0.9);

  // Legacy palette references
  --c-primary: var(--palette-primary-500);
  --c-accent: var(--palette-accent-500);
  --c-warn: var(--palette-warn-500);
  --c-contrast: var(--palette-primary-contrast-500);

  // ===============================
  // ANIMATION & TRANSITIONS
  // ===============================

  // Timing functions
  --ani-standard-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --ani-enter-timing: cubic-bezier(0, 0, 0.2, 1);
  --ani-leave-timing: cubic-bezier(0.4, 0, 1, 1);
  --ani-sharp-timing: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-in-out-quint: cubic-bezier(0.38, 0.04, 0.35, 0.96);

  // Durations
  --transition-duration-xs: 90ms;
  --transition-duration-s: 150ms;
  --transition-duration-m: 225ms;
  --transition-duration-l: 375ms;
  --transition-duration-enter: 225ms;
  --transition-duration-leave: 195ms;
  --page-transition-duration: 225ms;

  // Transition shorthands
  --transition-fast: all var(--transition-duration-xs) ease-in-out;
  --transition-standard: all var(--transition-duration-m) var(--ani-standard-timing);
  --transition-enter: all var(--transition-duration-m) var(--ani-enter-timing);
  --transition-leave: all var(--transition-duration-m) var(--ani-leave-timing);

  // ===============================
  // COMPONENT-SPECIFIC VARIABLES
  // ===============================

  // -----------------------------
  // Planner Task Component
  // -----------------------------
  --planner-item-height: 42px;
  --planner-item-ico-size: 20px;
  --planner-font-size: 14px;
  --planner-font-size-mobile: 13px;
  --planner-font-size-smaller: 11px;
  --planner-font-size-smaller-mobile: 10px;

  // -----------------------------
  // Task Component
  // -----------------------------
  --task-first-line-min-height: 40px;
  --task-icon-default-opacity: 0.7;
  --task-inner-padding-top-bottom: 4px;
  --task-is-done-dim-opacity: 0.3;
  --task-border-radius: var(--radius-sm);

  // Task z-indexes
  --z-drag-handle: 1;
  --z-task-title: 4;
  --z-btn: 4;
  --z-time-wrapper: 4;
  --z-btn-hover: 5;
  --z-hover-controls: 6;
  --z-progress-bar: 7;
  --z-check-done: 11;
  --z-first-line-controls-hover: 12;
  --z-swipe-block: 0;
  --z-is-selected-host: 20;
  --z-focus-host: 21;
  --z-is-current-host: 22;
  --z-toggle-sub-task-btn: 30;
  --z-drag-over-msg: 31;
  --z-task-title-focus: 32;
  --z-time-btn-svg-wrapper: 5555;

  // -----------------------------
  // Common Alpha Values
  // -----------------------------
  --border-alpha: 0.12;
  --overlay-alpha: 0.1;
  --separator-alpha: 0.3;
  --muted-alpha: 0.6;
  --intense-alpha: 0.9;

  // -----------------------------
  // Focus Ring (keyboard accessibility)
  // -----------------------------
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--palette-primary-500);
}

// ===============================
// THEME-SPECIFIC OVERRIDES
// ===============================
//
// Three layers (see `docs/theming-contract.md` for the full contract):
//
//   1. PRIMITIVES — declared on `body` (light) and `body.isDarkTheme` (dark).
//      Surfaces, ink, separators, scrim, brand. ~15 tokens. Themes overriding
//      these MUST use `body` / `body.isDarkTheme` selectors (specificity beats
//      the base; see plan §4 selector contract).
//
//   2. SEMANTIC ALIASES — declared once at `:where(body, body.isDarkTheme)`
//      (specificity 0,0,0). Category-A semantic tokens whose value is the
//      same across modes when expressed via primitives. Themes win regardless
//      of selector choice (`:root`, `body`, `body.isDarkTheme`).
//
//   3. CATEGORY B — true per-mode tokens whose relationship genuinely differs
//      between modes (see migration table for rationale). Stay split.
//
// State tokens (`--state-hover`, `--state-focus`, `--state-pressed`,
// `--state-selected`, `--state-disabled-alpha`) live in Layer 2. The velvet
// legacy bridge (`--hover-bg-opacity` / `--focus-bg-opacity` /
// `--pressed-bg-opacity` / `--disabled-opacity`) is implemented via `var()`
// fallback — no theme files are touched.

// -----------------------------
// Layer 1: PRIMITIVES (per-mode)
// -----------------------------
body {
  // Surfaces (background ladder, low → high)
  --surface-0: rgb(235, 235, 235);
  --surface-1: #f8f8f7;
  --surface-2: #fff;
  --surface-3: #fff;
  --surface-4: #fff;

  // Ink (foreground)
  --ink-strong: rgb(0, 0, 0);
  --ink: rgb(44, 44, 44);
  --ink-muted: rgba(44, 44, 44, 0.6);
  // RGB triplet (no `rgb()` wrapper) — keystone for `rgba(var(--ink-on-channel), α)` overlays.
  --ink-on-channel: 0, 0, 0;

  // Separators / scrim / overlays
  --separator: #d0d0d0;
  --divider: rgba(0, 0, 0, 0.12);
  --scrim: rgba(0, 0, 0, 0.6);
  --bg-overlay: rgba(255, 255, 255, 0.8);

  // Brand & focus ring
  // light uses primary-600 for stronger contrast on light backgrounds (see
  // `--sidenav-active-text` historical comment); fixes a pre-existing
  // light-mode contrast issue.
  --brand: var(--palette-primary-600);
  --focus-ring: var(--brand);

  // Input fields
  --input-bg: rgba(var(--ink-on-channel), 0.04);
  --input-bg-hover: rgba(var(--ink-on-channel), 0.07);
  --input-border-color: rgba(var(--ink-on-channel), 0.08);
}

body.isDarkTheme {
  --surface-0: var(--dark0);
  --surface-1: #131314;
  --surface-2: var(--dark3);
  --surface-3: var(--dark12);
  --surface-4: var(--dark24);

  --ink-strong: rgb(255, 255, 255);
  --ink: rgb(230, 230, 230);
  --ink-muted: rgba(235, 235, 235, 0.65);
  --ink-on-channel: 255, 255, 255;

  --separator: rgba(255, 255, 255, 0.1);
  --divider: rgba(255, 255, 255, 0.12);
  --scrim: rgba(0, 0, 0, 0.6);
  --bg-overlay: rgba(0, 0, 0, 0.8);

  --brand: var(--palette-primary-400);
  --focus-ring: var(--brand);

  // Input fields
  --input-bg: rgba(var(--ink-on-channel), 0.06);
  --input-bg-hover: rgba(var(--ink-on-channel), 0.1);
  --input-border-color: transparent;
}

// -----------------------------
// Layer 2: SEMANTIC ALIASES (zero specificity — themes always win)
// -----------------------------
//
// `:where()` makes the selector contribute zero specificity (CSS Selectors L4).
// Any theme override at `body`, `body.isDarkTheme`, or `:root` wins by spec.
:where(body, body.isDarkTheme) {
  // Backgrounds (Cat A)
  --bg: var(--surface-1);
  --bg-darker: var(--surface-0);
  --bg-lighter: var(--surface-3);
  --bg-lightest: var(--surface-4);
  --card-bg: var(--surface-2);

  // Navigation & panel (Cat A)
  --sidenav-bg: transparent;
  --sidenav-bg-mobile: var(--bg);
  // 10% ink overlay; replaces the `rgba(255,255,255,1.25)` typo that previously
  // clamped to opaque white in light mode.
  --sidenav-item-active-bg: rgba(var(--ink-on-channel), 0.1);
  --sidenav-active-text: var(--brand);
  --sidenav-text: var(--text-color-less-intense);
  --sidenav-text-hover: var(--text-color-most-intense);
  --sidenav-text-secondary: var(--text-color-muted);

  --right-panel-bg: transparent;
  --bottom-nav-height: 44px;
  --bottom-nav-bg: var(--sidenav-bg-mobile);
  --bottom-nav-shadow: var(--whiteframe-shadow-2dp);
  --bottom-panel-handle: rgba(var(--ink-on-channel), 0.4);
  --bottom-panel-handle-active: rgba(var(--ink-on-channel), 0.6);

  // Text (Cat A)
  --text-color: var(--ink);
  --text-color-muted: var(--ink-muted);
  --text-color-most-intense: var(--ink-strong);

  // Borders / separators / scrim (Cat A)
  --separator-color: var(--separator);
  --divider-color: var(--divider);
  --c-backdrop: var(--scrim);

  --notes-container-bg: inherit;

  // Task surfaces (Cat A)
  --task-c-bg: var(--surface-2);
  --task-c-current-bg: var(--surface-3);
  --task-c-drag-drop-bg: var(--surface-3);

  // Task shadows (Cat A — same in both modes)
  --task-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  --task-current-shadow: var(--whiteframe-shadow-4dp);

  // Chips / progress (Cat A)
  --chip-outline-color: rgba(125, 125, 125, 0.4);
  --progress-bg: rgba(127, 127, 127, 0.2);

  // Banner (Cat A — surface-4 maps both modes)
  --banner-bg: var(--surface-4);
  --banner-shadow: var(--whiteframe-shadow-2dp);

  // Improvement banner shared bits (Cat A)
  --improvement-border: var(--c-light-33);

  // Select/Options — both modes use 10% ink overlay
  --select-hover-bg: rgba(var(--ink-on-channel), 0.1);
  --options-border-color: rgba(var(--ink-on-channel), 0.1);

  // Schedule events (Cat A)
  --schedule-event-bg: var(--card-bg);

  // Task-detail card shadow (Cat A)
  --task-detail-shadow: var(--card-shadow);

  // Backdrop overlay (Cat A)
  --c-bg-overlay: var(--bg-overlay);

  // -------------------------------------------------------------------------
  // Interaction-state tokens
  //
  // LEGACY BRIDGE — each alpha falls back to velvet's pre-token name if
  // present (`--hover-bg-opacity` etc., `velvet.css:158–160`, declared under
  // `body.isDarkTheme`). CSS variable inheritance carries them down to every
  // consumer of the state tokens. ONE declaration per token.
  //
  // The bridge can be deleted in a future release once velvet (the only theme
  // using these legacy names) is migrated to declare `--state-*-alpha`
  // directly. Until then, the base layer references theme-private names —
  // accept the inverted coupling as the cost of keeping `--state-*` tunable
  // without editing any theme file.
  // -------------------------------------------------------------------------
  --state-hover-alpha: var(--hover-bg-opacity, 0.06);
  --state-focus-alpha: var(--focus-bg-opacity, 0.1);
  --state-pressed-alpha: var(--pressed-bg-opacity, 0.14);
  --state-selected-alpha: var(--selected-bg-opacity, 0.1);
  --state-disabled-alpha: var(--disabled-opacity, 0.4);

  // Pre-composed overlay colors — what components consume.
  --state-hover: rgba(var(--ink-on-channel), var(--state-hover-alpha));
  --state-focus: rgba(var(--ink-on-channel), var(--state-focus-alpha));
  --state-pressed: rgba(var(--ink-on-channel), var(--state-pressed-alpha));
  --state-selected: rgba(var(--ink-on-channel), var(--state-selected-alpha));

  // Input fields semantic aliases
  --input-border-color-focus: var(--focus-ring-color);
  --input-border-color-invalid: var(--palette-warn-500);
  --input-border-radius: var(--card-border-radius);
}

// -----------------------------
// Layer 3: CATEGORY B (true light/dark splits)
// -----------------------------
// These tokens stay split because either the relationship genuinely differs
// per mode (inverted, mode-only) or collapsing to a primitive would drift
// values past the screenshot-acceptance bar. See migration table for each.

/* stylelint-disable-next-line no-duplicate-selectors -- layered token file: Cat B follows Layer 1 primitives on the same selector */
body {
  // Background colors (Cat B)
  --bg-drag-col: rgb(242, 242, 242);
  --bg-slightly-lighter: var(--bg);
  --bg-super-light: #fff;
  --card-shadow: var(--whiteframe-shadow-2dp);

  // Navigation & panel (Cat B)
  --sidenav-hover-bg: rgba(205, 205, 205, 0.35);
  --overlay-bg: var(--c-backdrop, rgba(0, 0, 0, 0.6));
  --right-panel-bg-mobile: #fff;
  --bottom-panel-bg: #fff;

  // Text colors (Cat B)
  --text-color-less-intense: rgba(44, 44, 44, 0.9);
  --text-color-more-intense: var(--text-color);

  // Selected task (Cat B)
  --selected-task-bg-color: #fff;

  // Borders (Cat B)
  --extra-border-color: #eee;

  // Note colors (Cat B)
  --standard-note-bg: #ffffff;
  --standard-note-fg: var(--text-color);
  --standard-note-bg-hovered: var(--standard-note-bg);

  // Task colors (Cat B)
  --task-c-current-bg: color-mix(in srgb, var(--c-accent) 10%, var(--surface-2));
  --task-c-selected-bg: var(--selected-task-bg-color);
  --sub-task-c-bg: var(--task-c-bg);
  --sub-task-c-bg-done: var(--task-c-bg);
  --task-c-bg-done: var(--task-c-bg);
  --sub-task-c-bg-in-selected: var(--task-c-bg);

  // Task shadows (Cat B)
  --task-shadow-sub-task: none;
  --task-selected-shadow: var(--whiteframe-shadow-3dp);

  // Scrollbar colors (Cat B)
  --scrollbar-thumb: rgba(136, 136, 136, 0.4);
  --scrollbar-thumb-hover: rgba(85, 85, 85, 0.7);
  --scrollbar-track: rgba(241, 241, 241, 0);

  // Close button (Cat B — inverted relationship)
  --close-btn-bg: var(--bg-darker);
  --close-btn-border: var(--divider-color);

  // Improvement banner (Cat B)
  --improvement-text: rgba(44, 44, 44, 1);
  --improvement-button-text: rgba(44, 44, 44, 1);

  // Attachments (Cat B — inverted same-as-surface lift)
  --attachment-bg: var(--card-bg);
  --attachment-border: var(--extra-border-color);
  --attachment-control-bg: var(--c-light-40);
  --attachment-control-border: var(--c-light-50);
  --attachment-control-hover-bg: var(--c-light-90);

  // Schedule events (Cat B)
  --schedule-event-bg-in-side-panel: var(--schedule-event-bg);

  // Hover controls (Cat B — visible vs invisible per mode)
  --hover-controls-border: 1px solid;
  --hover-controls-border-opacity: 0.5;

  // Task detail item (Cat B; `--task-detail-value-color` is broken — out of scope)
  --task-detail-value-color: rgba(
    var(--palette-foreground-secondary-text),
    var(--palette-foreground-secondary-text-alpha, 1)
  );
  --task-detail-bg: var(--card-bg);
  --task-detail-bg-hover: #eeeeee;

  // Grid colors (Cat B)
  --grid-color: #dadce0;

  // Special colors overrides for light theme
  --sun-yellow: #ffc107;
}

/* stylelint-disable-next-line no-duplicate-selectors -- layered token file: Cat B follows Layer 1 primitives on the same selector */
body.isDarkTheme {
  // Background colors (Cat B)
  --bg-slightly-lighter: var(--dark4);
  --bg-super-light: #616161;

  // Navigation & panel (Cat B)
  --sidenav-hover-bg: rgba(255, 255, 255, 0.05);
  --overlay-bg: var(--c-backdrop, rgba(0, 0, 0, 0.8));
  --right-panel-bg-mobile: var(--bg);
  --bottom-panel-bg: var(--dark1);

  // Text colors (Cat B)
  --text-color-less-intense: rgba(235, 235, 235, 0.8);
  --text-color-more-intense: rgb(245, 245, 245);

  // Selected task (Cat B)
  --selected-task-bg-color: var(--dark6);

  // Borders (Cat B)
  --extra-border-color: rgba(255, 255, 255, 0.12);

  // Note colors (Cat B)
  --standard-note-bg: var(--dark10);
  --standard-note-fg: #eeeeee;
  --standard-note-bg-hovered: var(--dark24);

  // Task colors (Cat B)
  --task-c-current-bg: color-mix(in srgb, var(--c-accent) 18%, var(--surface-3));
  --task-c-selected-bg: var(--dark6);
  --sub-task-c-bg: var(--dark4-5);
  --sub-task-c-bg-done: var(--dark2);
  --task-c-bg-done: var(--dark1);
  --sub-task-c-bg-in-selected: var(--dark10);

  // Task shadows (Cat B)
  --task-shadow-sub-task: var(--task-shadow);
  --task-selected-shadow: var(--whiteframe-shadow-4dp);

  // Scrollbar colors (Cat B)
  --scrollbar-thumb: rgba(150, 150, 150, 0.3);
  --scrollbar-thumb-hover: rgba(150, 150, 150, 0.7);
  --scrollbar-track: rgba(34, 34, 34, 0);

  // Close button (Cat B — inverted relationship)
  --close-btn-bg: var(--bg-lightest);
  --close-btn-border: var(--extra-border-color);

  // Improvement banner (Cat B)
  --improvement-text: var(--text-color-most-intense);
  --improvement-button-text: white;

  // Attachments (Cat B — inverted same-as-surface lift)
  --attachment-bg: var(--bg-lighter);
  --attachment-border: transparent;
  --attachment-control-bg: var(--c-dark-40);
  --attachment-control-border: var(--c-dark-50);
  --attachment-control-hover-bg: var(--c-dark-90);

  // Schedule events (Cat B)
  --schedule-event-bg-in-side-panel: var(--dark12);

  // Hover controls (Cat B)
  --hover-controls-border: none;
  --hover-controls-border-opacity: 0;

  // Task detail item (Cat B; broken token kept as-is per scope)
  --task-detail-value-color: rgba(255, 255, 255, 0.7);
  --task-detail-bg: var(--dark8);
  --task-detail-bg-hover: var(--dark12);

  // Material Design sidenav backdrop override (dark-only — preserves
  // light-mode MD default fallback).
  --mat-sidenav-scrim-color: var(--c-dark-80);

  // Grid colors (Cat B — light gray hex would be opaque on dark surfaces;
  // dark uses low-opacity white instead).
  --grid-color: var(--c-light-10);

  // Sidenav active item (Cat B — dark intentionally softer than the
  // 0.10 alias resolves to; preserved at 0.075 to match pre-refactor visuals).
  --sidenav-item-active-bg: rgba(255, 255, 255, 0.075);
}

// -----------------------------
// State-token demo migrations (this PR — scope per plan §3):
//   * src/app/features/user-profile/dialog-user-profile-management — `:hover`
//     overlay + `.active-profile` selected lift now consume `--state-hover` /
//     `--state-selected`.
//   * src/app/imex/sync/dialog-restore-point — `:hover` overlay + `.selected`
//     lift now consume `--state-hover` / `--state-selected`.
// Bulk migration of remaining ~34 ad-hoc rgba state-overlay callsites is a
// follow-up PR (see plan §3 bulk-sweep regex).
// -----------------------------

/* stylelint-disable */
:root {
  /* stylelint-enable */

  // ===============================
  // SHADOWS & ELEVATION
  // ===============================

  --whiteframe-shadow-1dp: var(--md-sys-level1);
  --whiteframe-shadow-2dp: var(--md-sys-level1-5);
  --whiteframe-shadow-3dp: var(--md-sys-level2);
  --whiteframe-shadow-4dp: var(--md-sys-level2);
  --whiteframe-shadow-6dp: var(--md-sys-level3);
  --whiteframe-shadow-8dp: var(--md-sys-level3);
  --whiteframe-shadow-12dp: var(--md-sys-level4);
  --whiteframe-shadow-24dp: var(--md-sys-level5);

  // material design m3 shadows
  //--md-sys-level0: none;
  //--md-sys-level1: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
  //--md-sys-level1-5: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.24);
  //--md-sys-level2: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.3);
  //--md-sys-level3: 0 11px 7px 0 rgba(0, 0, 0, 0.19), 0 13px 25px 0 rgba(0, 0, 0, 0.3);
  //--md-sys-level4: 0 14px 12px 0 rgba(0, 0, 0, 0.17), 0 20px 40px 0 rgba(0, 0, 0, 0.3);
  //--md-sys-level5: 0 17px 17px 0 rgba(0, 0, 0, 0.15), 0 27px 55px 0 rgba(0, 0, 0, 0.3);

  // apple
  //--md-sys-level1:   0 1px 2px rgba(0,0,0,0.12);
  //--md-sys-level1-5: 0 2px 4px rgba(0,0,0,0.12);
  //--md-sys-level2:   0 4px 8px rgba(0,0,0,0.14);
  //--md-sys-level3:   0 8px 16px rgba(0,0,0,0.16);
  //--md-sys-level4:   0 12px 24px rgba(0,0,0,0.18);
  //--md-sys-level5:   0 20px 40px rgba(0,0,0,0.20);

  /* Ant-like tokens */
  --md-sys-level1: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px -2px rgba(0, 0, 0, 0.16);
  --md-sys-level1-5: 0 3px 10px rgba(0, 0, 0, 0.12), 0 3px 6px -3px rgba(0, 0, 0, 0.16);
  --md-sys-level2: 0 4px 12px rgba(0, 0, 0, 0.14), 0 6px 16px -4px rgba(0, 0, 0, 0.12);
  --md-sys-level3: 0 8px 24px rgba(0, 0, 0, 0.14), 0 12px 28px -6px rgba(0, 0, 0, 0.12);
  --md-sys-level4: 0 12px 32px rgba(0, 0, 0, 0.16), 0 20px 40px -8px rgba(0, 0, 0, 0.12);
  --md-sys-level5: 0 20px 48px rgba(0, 0, 0, 0.18), 0 32px 64px -10px rgba(0, 0, 0, 0.14);

  /* Fluent-like tokens: soft ambient + directional key */
  //--md-sys-level1:   0 1px 2px rgba(0,0,0,0.10), 0 2px 1px rgba(0,0,0,0.08);
  //--md-sys-level1-5: 0 2px 4px rgba(0,0,0,0.10), 0 3px 2px rgba(0,0,0,0.10);
  //--md-sys-level2:   0 4px 8px rgba(0,0,0,0.12), 0 6px 4px rgba(0,0,0,0.12);
  //--md-sys-level3:   0 8px 16px rgba(0,0,0,0.14), 0 10px 6px rgba(0,0,0,0.12);
  //--md-sys-level4:   0 12px 24px rgba(0,0,0,0.16), 0 16px 8px rgba(0,0,0,0.12);
  //--md-sys-level5:   0 20px 40px rgba(0,0,0,0.18), 0 28px 12px rgba(0,0,0,0.14);
}
