/* ==========================================================================
   dMind Pro — Redesign Tokens
   Три варианта делят общую основу; каждый переопределяет акцент/радиусы/
   типографику локально. Ориентир: Notion + Stripe + Linear.
   ========================================================================== */

:root {
  /* ---- Typography ---- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* numeric tabular defaults */
  --fvs-num: "tnum" 1, "lnum" 1, "cv11" 1, "ss01" 1;

  /* ---- Warm Neutral Palette (subtly warm, saturation ≤0.02) ---- */
  --bg-app: oklch(0.985 0.003 85);       /* app background — warm white */
  --bg-surface: oklch(1 0 0);            /* cards */
  --bg-subtle: oklch(0.975 0.004 85);    /* hover/striped */
  --bg-muted:  oklch(0.955 0.006 85);    /* input bg, chips bg */
  --bg-inset: oklch(0.965 0.005 85);

  --text-primary: oklch(0.22 0.008 270); /* near-black, subtly cool */
  --text-secondary: oklch(0.45 0.01 270);
  --text-tertiary: oklch(0.58 0.012 270);
  --text-disabled: oklch(0.72 0.008 270);

  --border: oklch(0.92 0.005 270);
  --border-strong: oklch(0.86 0.008 270);
  --border-subtle: oklch(0.95 0.004 270);

  /* ---- Accent — sophisticated indigo-blue, replaces #3B82F6 ---- */
  --accent: oklch(0.58 0.17 262);
  --accent-hover: oklch(0.52 0.18 262);
  --accent-soft: oklch(0.95 0.04 262);
  --accent-text: oklch(0.48 0.17 262);

  /* ---- Semantic ---- */
  --success: oklch(0.68 0.16 155);
  --success-soft: oklch(0.95 0.05 155);
  --success-text: oklch(0.50 0.14 155);

  --warning: oklch(0.78 0.15 75);
  --warning-soft: oklch(0.96 0.05 85);
  --warning-text: oklch(0.55 0.14 55);

  --danger: oklch(0.64 0.20 25);
  --danger-soft: oklch(0.96 0.04 25);
  --danger-text: oklch(0.52 0.20 25);

  --info: oklch(0.65 0.13 220);
  --info-soft: oklch(0.96 0.03 220);

  --neutral: oklch(0.58 0.012 270);
  --neutral-soft: oklch(0.95 0.005 270);

  /* Chart palette — harmonious, shared lightness/chroma */
  --chart-1: oklch(0.60 0.16 262);  /* indigo */
  --chart-2: oklch(0.70 0.14 195);  /* teal */
  --chart-3: oklch(0.72 0.16 140);  /* green */
  --chart-4: oklch(0.78 0.15 75);   /* amber */
  --chart-5: oklch(0.68 0.18 30);   /* coral */
  --chart-6: oklch(0.62 0.16 300);  /* violet */

  /* ---- Radii ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;

  /* ---- Shadows — soft, Notion-like ---- */
  --shadow-xs: 0 1px 0 rgba(15,23,42,0.03);
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 0 rgba(15,23,42,0.02);
  --shadow-md: 0 2px 4px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.03);
  --shadow-lg: 0 10px 24px -8px rgba(15,23,42,0.12), 0 4px 8px -4px rgba(15,23,42,0.06);
  --shadow-xl: 0 24px 48px -16px rgba(15,23,42,0.16), 0 8px 16px -8px rgba(15,23,42,0.08);
}

/* ---- Dark theme override ---- */
[data-theme="dark"] {
  --bg-app: oklch(0.18 0.008 270);
  --bg-surface: oklch(0.22 0.008 270);
  --bg-subtle: oklch(0.25 0.008 270);
  --bg-muted: oklch(0.27 0.008 270);
  --bg-inset: oklch(0.20 0.008 270);

  --text-primary: oklch(0.96 0.003 85);
  --text-secondary: oklch(0.72 0.008 270);
  --text-tertiary: oklch(0.58 0.01 270);

  --border: oklch(0.30 0.01 270);
  --border-strong: oklch(0.38 0.01 270);
  --border-subtle: oklch(0.26 0.008 270);

  --accent-soft: oklch(0.30 0.06 262);
  --success-soft: oklch(0.28 0.06 155);
  --warning-soft: oklch(0.30 0.06 75);
  --danger-soft: oklch(0.30 0.06 25);
  --info-soft: oklch(0.28 0.04 220);
  --neutral-soft: oklch(0.28 0.01 270);
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  background: var(--bg-app);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mono, .num { font-family: var(--font-mono); font-feature-settings: var(--fvs-num); font-variant-numeric: tabular-nums; }

/* Icons */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  user-select: none;
}

/* Reset anchors */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }

/* Scrollbar — Safari-style auto-hide (visible only during scroll / hover).
   Requires scroll-hide.js which toggles .is-scrolling on <html>. */
html { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: transparent transparent; }
html.is-scrolling,
html:hover { scrollbar-color: oklch(0.60 0.01 270 / 0.55) transparent; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: background .25s ease;
}
html.is-scrolling ::-webkit-scrollbar-thumb,
html:hover ::-webkit-scrollbar-thumb { background: oklch(0.60 0.01 270 / 0.45); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-thumb:hover { background: oklch(0.50 0.01 270 / 0.65); background-clip: padding-box; }