/* tokens.css — АБВ «Агентство Банных Впечатлений». Единый слой токенов (BLOCKING gate).
 * Концепция: «Живая доска» — тёплая бумага, стикеры внахлёст, скотч, трафарет Бэнкси.
 * Палитра из ТЗ §4.3. Naming Tailwind-совместимый (перенос в Next 1:1).
 * Light = тёплая бумажная доска (дышащая, chillrussia-vibe). Dark = глубокий сине-зелёный лес (#152626).
 */

:root {
  color-scheme: light dark;

  /* ── COLOR (light — тёплая бумага) ── */
  --color-bg:            #EEEAD4;   /* бумага-доска */
  --color-surface:       #F6F2E1;   /* стикер/карточка (тёплый светлый, ТЗ #F2EFDC) */
  --color-surface-2:     #E5E0C4;   /* вложенные поверхности */
  --color-text:          #152626;   /* глубокий сине-зелёный — «чернила» */
  --color-text-muted:    #56604a;   /* приглушённый оливковый */
  --color-border:        #d7d0b2;   /* линии/границы бумаги */

  --color-accent:        #6B7334;   /* природный зелёный — основной акцент (ТЗ) */
  --color-accent-fg:     #F6F2E1;   /* текст на акценте */
  --color-accent-hover:  #59612a;

  --color-fire:          #F2BF5E;   /* золотисто-песочный (тепло/огонь) */
  --color-fire-fg:       #152626;
  --color-terra:         #A66F3F;   /* терракот */
  --color-calm:          #8097A6;   /* сине-серый (спокойствие) */

  /* states */
  --color-success:       #6B7334;
  --color-warning:       #A66F3F;
  --color-danger:        #b34733;
  --color-focus-ring:    color-mix(in srgb, var(--color-accent) 60%, transparent);
  --color-overlay:       rgba(21,38,38,.55);

  /* glass (overlays) */
  --glass-bg:            color-mix(in srgb, var(--color-surface) 74%, transparent);
  --glass-border:        color-mix(in srgb, var(--color-text) 12%, transparent);
  --glass-blur:          14px;

  /* бренд-градиенты */
  --grad-forest: linear-gradient(150deg, #1c3230, #152626 55%, #21301f);
  --grad-fire:   linear-gradient(135deg, var(--color-fire), var(--color-terra));
  --grad-paper:  radial-gradient(120% 120% at 20% 0%, #F6F2E1 0%, #EEEAD4 60%, #E5E0C4 100%);

  /* ── TYPOGRAPHY ── */
  --font-hand:    "Caveat", "Segoe Script", cursive;                 /* «живой» рукописный акцент */
  --font-display: "Unbounded", "Manrope", ui-sans-serif, sans-serif; /* авангардный дисплей */
  --font-heading: "Manrope", ui-sans-serif, system-ui, sans-serif;   /* заголовки-гротеск */
  --font-body:    "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* модульная шкала (≈1.28) */
  --text-xs:   0.78rem;  --text-sm:  0.9rem;   --text-base: 1rem;
  --text-lg:   1.28rem;  --text-xl:  1.64rem;  --text-2xl:  2.1rem;
  --text-3xl:  2.7rem;   --text-4xl: 3.5rem;   --text-5xl:  4.6rem;
  --leading-tight: 1.08; --leading-normal: 1.6;
  --weight-normal: 400; --weight-medium: 500; --weight-semibold: 700; --weight-bold: 800;

  /* ── SPACING (4px base) ── */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem;  --space-8:3rem;   --space-10:4rem;
  --space-12:6rem;  --space-16:8rem;

  /* ── RADIUS ── */
  --radius-sm:4px; --radius-md:10px; --radius-lg:18px; --radius-xl:28px; --radius-full:9999px;

  /* ── SHADOW (стикеры на доске — мягкие, «оторванные от бумаги») ── */
  --shadow-sm: 0 1px 2px rgba(21,38,38,.10);
  --shadow-md: 0 6px 18px rgba(21,38,38,.14);
  --shadow-lg: 0 16px 44px rgba(21,38,38,.22);
  --shadow-sticker: 0 10px 24px -8px rgba(21,38,38,.32);

  /* ── MOTION ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast:150ms; --dur-base:240ms; --dur-slow:320ms;

  /* «живая доска» — углы наклона стикеров */
  --rot-1:-2.2deg; --rot-2:1.6deg; --rot-3:-1.1deg; --rot-4:2.6deg;

  --container: 1220px;
}

/* ── DARK — глубокий лес (#152626) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:          #122020;
    --color-surface:     #1a2b28;
    --color-surface-2:   #21332a;
    --color-text:        #F2EFDC;
    --color-text-muted:  #a9b39a;
    --color-border:      #33463c;
    --color-accent:      #A7B45C;   /* осветлённый зелёный для контраста на тёмном */
    --color-accent-fg:   #122020;
    --color-accent-hover:#b9c56e;
    --color-fire:        #F2BF5E;
    --color-terra:       #cf8a52;
    --color-calm:        #93a7b5;
    --glass-bg:          color-mix(in srgb, var(--color-surface) 62%, transparent);
    --glass-border:      color-mix(in srgb, #F2EFDC 12%, transparent);
    --grad-paper:        radial-gradient(120% 120% at 20% 0%, #1c2f2b 0%, #152626 55%, #1a2a1e 100%);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --shadow-md: 0 6px 18px rgba(0,0,0,.5);
    --shadow-lg: 0 16px 44px rgba(0,0,0,.6);
    --shadow-sticker: 0 12px 26px -8px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg:          #122020;
  --color-surface:     #1a2b28;
  --color-surface-2:   #21332a;
  --color-text:        #F2EFDC;
  --color-text-muted:  #a9b39a;
  --color-border:      #33463c;
  --color-accent:      #A7B45C;
  --color-accent-fg:   #122020;
  --color-accent-hover:#b9c56e;
  --color-fire:        #F2BF5E;
  --color-terra:       #cf8a52;
  --color-calm:        #93a7b5;
  --glass-bg:          color-mix(in srgb, var(--color-surface) 62%, transparent);
  --glass-border:      color-mix(in srgb, #F2EFDC 12%, transparent);
  --grad-paper:        radial-gradient(120% 120% at 20% 0%, #1c2f2b 0%, #152626 55%, #1a2a1e 100%);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.6);
  --shadow-sticker: 0 12px 26px -8px rgba(0,0,0,.6);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* ── базовые сбросы ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  overflow-x: clip; /* guard от суб-пиксельного гориз. оверфлоу; не ломает sticky (в отличие от hidden) */
  font-family: var(--font-body); font-size: var(--text-base);
  line-height: var(--leading-normal); -webkit-font-smoothing: antialiased;
  /* тонкая «бумажная» текстура доски */
  background-image:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--color-text) 4%, transparent) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 62%, color-mix(in srgb, var(--color-text) 3%, transparent) 0 1px, transparent 1px);
  background-size: 26px 26px, 34px 34px;
}
h1,h2,h3,h4 { font-family: var(--font-heading); line-height: var(--leading-tight); font-weight: var(--weight-bold); margin: 0 0 .4em; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration-color: color-mix(in srgb, var(--color-accent) 55%, transparent); text-underline-offset: 3px; }
img, video, svg { max-width: 100%; height: auto; }

/* ── glass-утилита ── */
.u-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
}

/* ── focus-ring ── */
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* ── visually-hidden ── */
.u-visually-hidden {
  position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ── reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }