/* ============================================================
   Paviar — Design Tokens
   Dark, ChatGPT-vibe. Soft, airy, minimal AI clichés.
   ============================================================ */

:root {
  /* ---------- Surfaces (lighter — closer to ChatGPT chat surface) ---------- */
  --bg-sidebar:     #1F1F21;        /* sidebar — slightly darker than main */
  --bg-canvas:      #2A2A2D;        /* page background */
  --bg-surface:     #34343A;        /* default card / panel */
  --bg-elevated:    #3F3F46;        /* nested card / popover / modal */
  --bg-hover:       #44444B;        /* hover row / button-ghost hover */
  --bg-active:      #4E4E55;        /* pressed / selected */
  --bg-input:       #232326;        /* input background — recedes below surface */
  --bg-overlay:     rgba(15,15,17,0.68); /* modal scrim */

  /* ---------- Borders (rgba — slightly stronger to be visible on lighter bg) ---------- */
  --border-subtle:  rgba(255,255,255,0.07);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.16);
  --border-focus:   rgba(139,123,255,0.55);

  /* ---------- Foreground ---------- */
  --fg-primary:     #ECECF1;
  --fg-secondary:   #BCBCC4;        /* lifted further for contrast on lighter bg */
  --fg-tertiary:    #8A8A92;
  --fg-disabled:    #5C5C63;
  --fg-on-accent:   #1A1A1D;        /* dark text over light accent fill */

  /* ---------- Brand (Paviar logo) ---------- */
  --brand:          #65B2AE;        /* фирменный бирюзовый — логотип и знак */
  --brand-icon-bg:  #0F1514;        /* плашка иконки приложения */

  /* ---------- Accent (Lavender — recommended primary) ---------- */
  --accent:         #8B7BFF;
  --accent-hover:   #9C8DFF;
  --accent-press:   #7A69F0;
  --accent-quiet:   rgba(139,123,255,0.12);   /* tinted background */
  --accent-quiet-2: rgba(139,123,255,0.20);
  --accent-text:    #C9BEFF;                  /* AA-readable accent on dark */

  /* Alternate accent palettes (see Tweaks in design system) */
  --accent-indigo:  #6B8BFF;
  --accent-iris:    #B193FE;

  /* ---------- Semantic (oklch — consistent chroma/lightness) ---------- */
  --positive:        oklch(0.78 0.15 150);
  --positive-quiet:  oklch(0.78 0.15 150 / 0.14);
  --positive-text:   oklch(0.86 0.13 150);

  --warning:         oklch(0.80 0.15 75);
  --warning-quiet:   oklch(0.80 0.15 75 / 0.14);
  --warning-text:    oklch(0.88 0.13 75);

  --negative:        oklch(0.72 0.18 25);
  --negative-quiet:  oklch(0.72 0.18 25 / 0.14);
  --negative-text:   oklch(0.80 0.16 25);

  --info:            oklch(0.78 0.14 240);
  --info-quiet:      oklch(0.78 0.14 240 / 0.14);
  --info-text:       oklch(0.85 0.12 240);

  /* ---------- 5-step score scale (1–10) ---------- */
  --score-1:         oklch(0.72 0.18 25);    /* 1–2 — не подходит — насыщенный красный */
  --score-1-quiet:   oklch(0.72 0.18 25 / 0.14);
  --score-1-text:    oklch(0.82 0.16 25);

  --score-2:         oklch(0.76 0.15 50);    /* 3–4 — слабо подходит — оранжевый */
  --score-2-quiet:   oklch(0.76 0.15 50 / 0.14);
  --score-2-text:    oklch(0.86 0.13 55);

  --score-3:         oklch(0.82 0.14 90);    /* 5–6 — средне — жёлтый */
  --score-3-quiet:   oklch(0.82 0.14 90 / 0.14);
  --score-3-text:    oklch(0.88 0.12 90);

  --score-4:         oklch(0.80 0.15 145);   /* 7–8 — хорошо — светло-зелёный */
  --score-4-quiet:   oklch(0.80 0.15 145 / 0.14);
  --score-4-text:    oklch(0.86 0.13 145);

  --score-5:         oklch(0.74 0.20 150);   /* 9–10 — отлично — насыщенный зелёный */
  --score-5-quiet:   oklch(0.74 0.20 150 / 0.16);
  --score-5-text:    oklch(0.84 0.18 150);

  /* ---------- Type ---------- */
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-12: 12px;  --lh-12: 16px;
  --fs-13: 13px;  --lh-13: 20px;
  --fs-14: 14px;  --lh-14: 22px;
  --fs-15: 15px;  --lh-15: 24px;
  --fs-17: 17px;  --lh-17: 26px;
  --fs-20: 20px;  --lh-20: 28px;
  --fs-24: 24px;  --lh-24: 32px;
  --fs-32: 32px;  --lh-32: 40px;
  --fs-44: 44px;  --lh-44: 52px;

  --tracking-tight: -0.01em;
  --tracking-snug:  -0.005em;
  --tracking-wide:   0.06em;

  /* ---------- Spacing (4-base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---------- Radii ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ---------- Shadows (subtle on dark) ---------- */
  --sh-low:  0 1px 2px rgba(0,0,0,0.4);
  --sh-mid:  0 4px 14px rgba(0,0,0,0.32), 0 1px 2px rgba(0,0,0,0.4);
  --sh-high: 0 24px 60px rgba(0,0,0,0.55), 0 4px 14px rgba(0,0,0,0.3);
  --sh-focus: 0 0 0 3px var(--accent-quiet-2);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* ---------- Layout ---------- */
  --sidebar-w: 268px;
  --topbar-h: 56px;
  --container-max: 1280px;
}

/* Base reset / sane defaults */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  color: var(--fg-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; }
::selection { background: var(--accent-quiet-2); color: var(--fg-primary); }