/* Design tokens — mirrors utilities/styles.py in the legacy app */
:root {
  /* Backgrounds */
  --bg: #181919;
  --card: #292828;
  --daily-goals-bg: #292828;
  --week-grid-surface: var(--daily-goals-bg);
  /* Card / row / event surfaces. 🔴 OPAQUE — a translucent card takes the colour
     of whatever it lands on (backdrop gradient, another card, a connector), so
     the same card is two colours in two places. These are the pre-hydration
     defaults; applyDisplaySettingsToDocument() resolves them per theme, dark by
     flattening the old 0.72/0.82 tint, light by moving toward white. */
  --utility-surface: #232222;
  --utility-surface-strong: #242323;
  /* Accent-tinted surface, e.g. long-term-goal rows. Set per-theme too. */
  --utility-surface-accent: #3c6e9d;
  /* The board card, on every goal tab. Opaque like the two above and for the
     same reason: the old `rgba(var(--overlay-rgb), 0.04)` had no panel under it
     — the boards are transparent to the body — so a card was showing the
     backdrop gradient through itself. Dark is that 4%/9% flattened against the
     default body; light resolves to the utility surface. */
  --card-surface: #323131;
  --card-surface-strong: #3c3b3b;
  --backdrop-gradient-layer: repeating-linear-gradient(
    135deg,
    rgba(50.24, 73.04, 100.2, 0.18) 0%,
    rgba(50.24, 73.04, 100.2, 0.18) 16.9%,
    rgba(36.24, 35.8, 35.8, 0.18) 35.1%,
    rgba(36.24, 35.8, 35.8, 0.18) 42.9%,
    rgba(50.24, 73.04, 100.2, 0.18) 52%
  );

  /* Surfaces that sit ABOVE a panel — menus, dropdowns, popovers.
     One token, three names: `--bg-elevated` is the one to use, the other two are
     the names older stylesheets reached for. All three are set per-theme by
     applyDisplaySettingsToDocument(); before that they were declared NOWHERE, so
     every `var(--bg-elevated, #1c1f26)` fell through to its hardcoded dark hex
     and a light-theme menu drew dark text on a dark panel. */
  --bg-elevated: #313030;
  --bg-secondary: var(--bg-elevated);
  --surface-raised: var(--bg-elevated);
  /* The floating panel (nav drawer, week widgets). Same story — and opaque now,
     like every other surface. */
  --panel-bg: #313030;

  /* Text */
  --text-primary: #e8eaed;
  --text-secondary: #9aa0a6;
  --text-muted: #5f6368;
  /* Between secondary and muted — icon glyphs and row details. */
  --text-tertiary: #7e858c;

  /* Accents */
  --accent: #4a9eff;
  --accent-hover: #3d8be6;
  --tab-active-bg: rgba(74, 158, 255, 0.18);
  --tab-active-border: rgba(74, 158, 255, 0.35);

  /* Experiment colors */
  --experiment-1: #4a9eff;
  --experiment-2: #9c7cf4;
  --experiment-3: #4ecdc4;

  /* Widget colors */
  --rating-line: #33c46e;
  --burnout-line: #e05050;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.13);

  /* Theme-adaptive overlay base.
     Use as rgba(var(--overlay-rgb), <alpha>) for surface tints, hovers,
     dividers, and text that must contrast with the panel/background.
     White on dark themes; flipped to dark slate on light themes by
     applyDisplaySettingsToDocument() so the same alpha reads correctly
     against the opposite background. */
  --overlay-rgb: 255, 255, 255;
  /* Scrim behind modals/popovers — stays dark in both themes. */
  --scrim: rgba(0, 0, 0, 0.55);

  /* Selection / focus */
  --selection: rgba(74, 158, 255, 0.3);

  /* Shared dimensions */
  --shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
  --radius: 16px;
  --radius-sm: 12px;
  --slot: 28px; /* schedule grid row height */
}