@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Surface */
  --bg:        #0B0B0E;
  --bg-page:   #060608;
  --bg2:       #14141A;
  --bg3:       #1D1D24;
  --bg4:       #25252E;
  --border:    #28282F;
  --border2:   #3A3A44;

  /* Text */
  --text:      #F1F1F4;
  --text-2:    #8B8B95;
  --text-3:    #72727C;

  /* Aliases для обратной совместимости */
  --text-mid:  #8B8B95;
  --text-dim:  #72727C;

  /* Brand accent: amber */
  --accent:      #F6C26B;
  --accent-ink:  #1A1100;
  --accent-soft: rgba(246, 194, 107, 0.10);
  --accent-bord: rgba(246, 194, 107, 0.30);
  --accent-bg:   rgba(246, 194, 107, 0.08);
  --accent-b:    rgba(246, 194, 107, 0.30);

  /* Semantic palette */
  --sage:        #A8C39B;
  --sage-ink:    #0E1A0B;
  --sage-soft:   rgba(168, 195, 155, 0.10);
  --sage-bord:   rgba(168, 195, 155, 0.30);

  --butter:      #D9B872;
  --butter-soft: rgba(217, 184, 114, 0.10);
  --butter-bord: rgba(217, 184, 114, 0.30);

  --clay:        #D67E5C;
  --clay-soft:   rgba(214, 126, 92, 0.10);
  --clay-bord:   rgba(214, 126, 92, 0.30);

  --brick:       #B85544;
  --brick-soft:  rgba(184, 85, 68, 0.10);
  --brick-bord:  rgba(184, 85, 68, 0.32);

  /* Aliases старых цветов → новая палитра */
  --green:      #A8C39B;
  --green-bg:   rgba(168, 195, 155, 0.08);
  --green-b:    rgba(168, 195, 155, 0.30);
  --yellow:     #D9B872;
  --yellow-bg:  rgba(217, 184, 114, 0.08);
  --yellow-b:   rgba(217, 184, 114, 0.30);
  --orange:     #D67E5C;
  --orange-bg:  rgba(214, 126, 92, 0.08);
  --orange-b:   rgba(214, 126, 92, 0.30);
  --red:        #B85544;
  --red-bg:     rgba(184, 85, 68, 0.08);
  --red-b:      rgba(184, 85, 68, 0.32);

  /* Typography */
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans:  'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;

  /* Font sizes */
  --fs-welcome:   36px;
  --fs-decision:  38px;
  --fs-step:      30px;
  --fs-patterns:  26px;
  --fs-score:     38px;
  --fs-body-l:    16px;
  --fs-body:      14px;
  --fs-sub:       13px;
  --fs-meta:      12px;
  --fs-cap:       11px;
  --fs-cap-s:     10px;
  --fs-bnav:       9px;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;

  --space-2:   2px;
  --space-4:   4px;
  --space-6:   6px;
  --space-8:   8px;
  --space-10:  10px;
  --space-12:  12px;
  --space-14:  14px;
  --space-16:  16px;
  --space-18:  18px;
  --space-20:  20px;
  --space-24:  24px;
  --space-28:  28px;
  --space-32:  32px;
  --space-40:  40px;

  /* Radii — sharp by design */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   8px;
  --radius-full: 999px;
  --radius-pill: 999px;

  /* Glow */
  --glow-sage:   0 0 32px rgba(168, 195, 155, 0.10), 0 4px 24px rgba(0,0,0,0.30), inset 0 1px 0 rgba(168, 195, 155, 0.10);
  --glow-butter: 0 0 32px rgba(217, 184, 114, 0.10), 0 4px 24px rgba(0,0,0,0.30), inset 0 1px 0 rgba(217, 184, 114, 0.10);
  --glow-clay:   0 0 32px rgba(214, 126,  92, 0.10), 0 4px 24px rgba(0,0,0,0.30), inset 0 1px 0 rgba(214, 126,  92, 0.10);
  --glow-brick:  0 0 36px rgba(184,  85,  68, 0.14), 0 4px 24px rgba(0,0,0,0.30), inset 0 1px 0 rgba(184,  85,  68, 0.12);

  /* Motion */
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;
  --dur-breath: 4000ms;

  /* Layout */
  --max-width:  390px;
  --app-width:  390px;
  --nav-height: 64px;
  --tap-min:    44px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums lining-nums;
}

body {
  max-width: var(--max-width);
  margin: 0 auto;
  overflow-x: hidden;
}

.mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}

:where(button, a, input, textarea, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}