/* Дизайн-токены «Три Дерева» — единый файл: @font-face (self-hosted) + 157 переменных + база.
   Источник: design/tridereva/tokens/*.css. Файл СГЕНЕРИРОВАН, правки вносить в дизайн-систему
   и пересобирать: pnpm assets:tokens */

/* --- шрифты: self-hosted, без внешних CDN --- */
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/vollkorn-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/vollkorn-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/vollkorn-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/vollkorn-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/golos-text-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/golos-text-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/golos-text-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/golos-text-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- tokens/colors.css --- */
:root{
/* --- Brand palette, measured from брендбук.pdf p.5 (CMYK/RGB/PANTONE bars) --- */
--brand-green-light:#d2e28a; /* C20 M0 Y60 K0 · PANTONE 372 C */
--brand-green:#80c242;       /* C50 M0 Y100 K0 · PANTONE 376 C */
--brand-leaf:#2bb44c;        /* pattern green sampled from the leaf element */
--brand-lime:#d2e27e;        /* solid · PANTONE 385 C */
--brand-yellow:#ffcb05;      /* C0 M20 Y100 K0 · PANTONE 7406 C */
--brand-orange-light:#ffdaa2;/* C0 M15 Y40 K0 · PANTONE 148 C */
--brand-orange:#faa619;      /* C0 M40 Y100 K0 · PANTONE 137 C */
--brand-blue-light:#c7e5fb;  /* C25 M0 Y0 K0 · PANTONE 545 C */
--brand-blue:#00b9ea;        /* C90 M0 Y0 K0 · PANTONE 306 C */
--brand-black:#000000;       /* PANTONE Process Black C */

/* --- Brand gradients (the brandbook defines the three bars as gradients) --- */
--gradient-green:linear-gradient(90deg,#d2e28a 0%,#80c242 100%); /* @kind other */
--gradient-orange:linear-gradient(90deg,#ffdaa2 0%,#faa619 100%); /* @kind other */
--gradient-blue:linear-gradient(90deg,#c7e5fb 0%,#00b9ea 100%); /* @kind other */

/* --- Green ramp, extended from --brand-green for interface use --- */
--green-50:#f4f9ec;
--green-100:#e7f2d5;
--green-200:#d2e28a;
--green-300:#b6d768;
--green-400:#9bcd52;
--green-500:#80c242;
--green-600:#5fa22e;
--green-700:#478020;
--green-800:#365f19;

/* --- Ink / neutral ramp (warm-neutral, keyed to the logo's ink outline) --- */
--ink-900:#14161a;
--ink-800:#22262b;
--ink-700:#3b4147;
--ink-600:#565d64;
--ink-500:#767d84;
--ink-400:#a0a7ad;
--ink-300:#c8cdd1;
--ink-200:#e2e6e8;
--ink-100:#eff2f3;
--ink-50:#f7f9f9;
--white:#ffffff;

/* --- Semantic aliases --- */
--text-heading:var(--ink-900);
--text-body:var(--ink-800);
--text-muted:var(--ink-600);
--text-faint:var(--ink-500);
--text-inverse:var(--white);
--text-link:var(--green-700);
--text-link-hover:var(--green-800);

--surface-page:var(--white);
--surface-subtle:var(--ink-50);
--surface-card:var(--white);
--surface-sunken:var(--ink-100);
--surface-inverse:var(--ink-900);
--surface-brand-soft:var(--green-50);
--surface-brand:var(--green-500);
--surface-accent-yellow:var(--brand-yellow);

--border-subtle:var(--ink-200);
--border-default:var(--ink-300);
--border-strong:var(--ink-800);
--border-brand:var(--green-500);

--accent:var(--green-600);
--accent-hover:var(--green-700);
--accent-active:var(--green-800);
--accent-quiet:var(--green-50);
--focus-ring:color-mix(in oklch,var(--green-500) 60%,transparent);

/* Semantic status colours. Green/yellow come from the brandbook; the red is an
   intentional addition (the brandbook defines no error colour) tuned to the palette. */
--success:var(--green-600);
--success-soft:var(--green-50);
--warning:var(--brand-orange);
--warning-soft:#fff5e2;
--danger:#c8452d;
--danger-soft:#fdeeea;
--info:var(--brand-blue);
--info-soft:var(--brand-blue-light);
}

/* --- tokens/typography.css --- */
:root{
--font-display:"Vollkorn","Souvenir","PT Serif",Georgia,serif; /* substitute for ITC Souvenir */
--font-ui:"Golos Text","Golos UI","Helvetica Neue",Arial,sans-serif;
--font-mono:"JetBrains Mono","SF Mono",ui-monospace,monospace;

--text-3xs:11px;
--text-2xs:12px;
--text-xs:13px;
--text-sm:14px;
--text-base:16px;
--text-md:18px;
--text-lg:20px;
--text-xl:24px;
--text-2xl:30px;
--text-3xl:36px;
--text-4xl:46px;
--text-5xl:58px;
--text-6xl:72px;

--leading-tight:1.1;
--leading-snug:1.25;
--leading-normal:1.5;
--leading-relaxed:1.65;

--tracking-tight:-0.02em;
--tracking-normal:0;
--tracking-wide:0.04em;
--tracking-caps:0.08em;

--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;

/* semantic type roles */
--type-hero-font:var(--font-display);
--type-hero-size:var(--text-5xl);
--type-hero-weight:var(--weight-bold);
--type-heading-font:var(--font-display);
--type-body-font:var(--font-ui);
--type-body-size:var(--text-base);
--type-body-leading:var(--leading-relaxed);
--type-label-font:var(--font-ui);
--type-label-size:var(--text-sm);
--type-eyebrow-tracking:var(--tracking-caps);
--type-amount-font:var(--font-ui);
}

/* --- tokens/spacing.css --- */
:root{
--space-0:0px;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
--space-32:128px;

--gutter-mobile:var(--space-4);
--gutter-desktop:var(--space-8);
--container-max:1120px;
--container-narrow:720px;
--container-pay:480px;
--section-y-desktop:var(--space-24);
--section-y-mobile:var(--space-12);
--stack-tight:var(--space-2);
--stack:var(--space-4);
--stack-loose:var(--space-8);
--tap-min:44px;
}

/* --- tokens/radius.css --- */
:root{
--radius-xs:4px;
--radius-sm:6px;
--radius-md:10px;
--radius-lg:14px;
--radius-xl:20px;
--radius-pill:999px;
--radius-card:var(--radius-lg);
--radius-control:var(--radius-md);
--radius-input:var(--radius-md);
--border-hairline:1px;
--border-thick:2px;
}

/* --- tokens/elevation.css --- */
:root{
--shadow-none:none;
--shadow-xs:0 1px 2px rgba(20,22,26,.06);
--shadow-sm:0 1px 3px rgba(20,22,26,.07),0 1px 2px rgba(20,22,26,.04);
--shadow-md:0 4px 14px rgba(20,22,26,.08);
--shadow-lg:0 12px 32px rgba(20,22,26,.10);
--shadow-brand:0 6px 18px rgba(95,162,46,.22);
--ring-focus:0 0 0 3px var(--focus-ring);
--ring-inset:inset 0 0 0 1px var(--border-subtle);
}

/* --- tokens/motion.css --- */
:root{
--ease-standard:cubic-bezier(.2,.8,.3,1); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
--duration-instant:80ms; /* @kind other */
--duration-fast:140ms; /* @kind other */
--duration-base:200ms; /* @kind other */
--duration-slow:320ms; /* @kind other */
--transition-control:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard); /* @kind other */
--press-scale:.98; /* @kind other */
}

/* --- tokens/base.css --- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-ui);font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);line-height:var(--leading-snug);margin:0}
h1{font-size:var(--text-4xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight)}
h2{font-size:var(--text-2xl);font-weight:var(--weight-bold)}
h3{font-size:var(--text-lg);font-weight:var(--weight-semibold)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-xs)}
code,pre{font-family:var(--font-mono);font-size:.92em}
