/* WideBear · design tokens (redesign) */
:root {
  --font-ui: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Light theme — warm paper */
  --bg:            #F7F5F0;
  --bg-elev:       #FFFFFF;
  --bg-sunk:       #EEEBE3;
  --surface:       #FFFFFF;
  --surface-2:     #F2EFE8;
  --border:        #E4DFD4;
  --border-strong: #CFC9BB;
  --text:          #18181A;
  --text-muted:    #6B6A66;
  --text-soft:     #9C9A93;

  /* Rail (sidebar) — always dark, warm-black */
  --rail-bg:     #0E0F12;
  --rail-bg-2:   #17181C;
  --rail-line:   #23252B;
  --rail-text:   #E7E4DA;
  --rail-muted:  #8A8C92;
  --rail-active: #1C1E24;

  /* Accents */
  /* Goldenrod — primary brand (≈ rgb(224, 182, 0) / #E0B600).
     Насыщенный золотой (vivid gold / saffron-gold) — теплее янтарного
     и чище горчичного. Hue ~92 (жёлто-зелёный сдвиг), высокая chroma. */
  --amber:         oklch(0.80 0.17 92);
  --amber-ink:     oklch(0.32 0.08 92);
  --amber-soft:    oklch(0.94 0.08 95);
  --electric:      oklch(0.62 0.18 250);
  --electric-soft: oklch(0.95 0.04 250);
  --mint:          oklch(0.74 0.14 165);
  --mint-soft:     oklch(0.94 0.06 165);
  --coral:         oklch(0.68 0.18 25);
  --coral-soft:    oklch(0.94 0.05 30);
  --violet:        oklch(0.66 0.17 300);
  --violet-soft:   oklch(0.95 0.04 300);

  /* Status tokens */
  --status-new:        var(--violet);
  --status-new-bg:     var(--violet-soft);
  --status-draft:      var(--amber-ink);
  --status-draft-bg:   var(--amber-soft);
  --status-confirm:    var(--mint);
  --status-confirm-bg: var(--mint-soft);
  --status-live:       var(--coral);
  --status-live-bg:    var(--coral-soft);
  --status-done:       #4F5058;
  --status-done-bg:    #E7E4DA;

  --shadow-xs: 0 1px 2px rgba(20, 18, 10, 0.05);
  --shadow-sm: 0 2px 8px rgba(20, 18, 10, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(20, 18, 10, 0.10);
  --shadow-lg: 0 24px 48px -16px rgba(20, 18, 10, 0.16);

  --ring: 0 0 0 3px oklch(0.80 0.17 92 / 0.35);

  /* Mix targets for component states (kept theme-aware) */
  --hover-mix:        black;        /* :hover darkens accents in light theme */
  /* Foreground for *-soft tints. In light theme uses the bright accent so
     pills/alerts feel like coloured highlights. In dark we override below. */
  --on-amber-soft:    var(--amber-ink);
  --on-electric-soft: var(--electric);
  --on-mint-soft:     var(--mint);
  --on-coral-soft:    var(--coral);
  --on-violet-soft:   var(--violet);
}

[data-theme="dark"],
[data-bs-theme="dark"] {
  --bg:            #0E0F12;
  --bg-elev:       #17181C;
  --bg-sunk:       #0A0B0E;
  --surface:       #17181C;
  --surface-2:     #1E2026;
  --border:        #262830;
  --border-strong: #343741;
  --text:          #EDEAE1;
  --text-muted:    #9A9A97;
  --text-soft:     #6B6B68;

  --rail-bg:     #08090B;
  --rail-bg-2:   #0F1013;
  --rail-line:   #1F2127;
  --rail-text:   #EDEAE1;
  --rail-muted:  #7C7E85;
  --rail-active: #1A1C22;

  --amber-soft:    oklch(0.36 0.09 92);
  --electric-soft: oklch(0.28 0.08 250);
  --mint-soft:     oklch(0.30 0.08 165);
  --coral-soft:    oklch(0.32 0.09 30);
  --violet-soft:   oklch(0.30 0.08 300);

  --status-draft:    oklch(0.88 0.12 75);
  --status-confirm:  oklch(0.84 0.14 165);
  --status-live:     oklch(0.80 0.17 25);
  --status-new:      oklch(0.80 0.15 300);
  --status-done:     #B7B5AD;
  --status-done-bg:  #1E2026;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 28px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.7);

  /* In dark theme, hover should lighten accents (mix toward white) */
  --hover-mix:        white;
  /* On dark soft chips text needs to read on a darker tint */
  --on-amber-soft:    oklch(0.94 0.13 95);
  --on-electric-soft: oklch(0.85 0.12 250);
  --on-mint-soft:     oklch(0.90 0.12 165);
  --on-coral-soft:    oklch(0.88 0.14 25);
  --on-violet-soft:   oklch(0.88 0.12 300);

  --ring: 0 0 0 3px oklch(0.80 0.17 92 / 0.45);
}

.wb-redesign { font-family: var(--font-ui); color: var(--text); background: var(--bg); }
.wb-redesign * { box-sizing: border-box; }
.wb-redesign .mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}

/* ==========================================================================
   Bootstrap variable bridge — sync --bs-* to redesign tokens so legacy
   templates that style on var(--bs-secondary-bg)/--bs-border-color/--bs-body-color
   stay consistent with new components on the same page (event list, dashboard).
   Applies only on body.wb-shell-redesign so non-redesigned pages keep stock Bootstrap.
   ========================================================================== */
body.wb-shell-redesign {
  --bs-body-bg:        var(--bg);
  --bs-body-color:     var(--text);
  --bs-emphasis-color: var(--text);
  --bs-secondary-bg:   var(--surface);
  --bs-tertiary-bg:    var(--surface-2);
  --bs-border-color:   var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color:  var(--text-soft);
  --bs-link-color:      var(--on-amber-soft);
  --bs-link-hover-color: var(--text);
}