/* Дизайн-система chef.ru. Токены перенесены из выгрузки без изменений;
   правки вносим там, здесь только подключение шрифтов переписано на
   локальные файлы, а правила базовой разметки ограничены нашим документом,
   чтобы не менять вид страниц, которые рисует тема. */

/* Gropled — локально, файлы лежат рядом. Начертание одно: в выгрузке оно
   отдано и под 400, и под 700, чтобы браузер ничего не доводил сам. */
@font-face{font-family:"Gropled";src:url("fonts/gropled-bold.woff") format("woff"),url("fonts/gropled-bold.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Gropled";src:url("fonts/gropled-bold.woff") format("woff"),url("fonts/gropled-bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}

/* Golos Text и IBM Plex Mono — тоже локально, оба под SIL OFL 1.1.
   Браузер скачивает только то начертание, которое действительно
   встретилось на странице, поэтому держать все шесть весов не накладно. */
@font-face{font-family:"Golos Text";src:url("fonts/golos-text-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Golos Text";src:url("fonts/golos-text-500.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Golos Text";src:url("fonts/golos-text-600.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Golos Text";src:url("fonts/golos-text-700.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Golos Text";src:url("fonts/golos-text-800.woff") format("woff");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Golos Text";src:url("fonts/golos-text-900.woff") format("woff");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/plex-mono-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/plex-mono-500.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}

/* ===== tokens/colors.css ===== */
/* chef.ru — colour system. Graphite ink + the one inherited accent: golden khaki #a88f48. */
:root{
  /* Graphite neutrals — warm-leaning near-black through paper */
  --graphite-950:#0d0d0c;--graphite-900:#171714;--graphite-800:#22221f;--graphite-700:#2f2f2b;
  --graphite-600:#43433d;--graphite-500:#5e5e56;--graphite-400:#84847a;--graphite-300:#adada2;
  --graphite-200:#d1d1c8;--graphite-100:#e4e4df;--graphite-050:#f1f1ef;--white:#ffffff;

  /* Gold-khaki ramp, built around the brand value at 500 */
  --gold-050:#f8f5ea;--gold-100:#ede4c8;--gold-200:#dccea2;--gold-300:#c8b47a;
  --gold-400:#b89f5b;--gold-500:#a88f48;--gold-600:#8d773b;--gold-700:#71602f;
  --gold-800:#544824;--gold-900:#382f18;

  /* Surfaces */
  --surface-page:var(--graphite-050);
  --surface-raised:var(--white);
  --surface-sunken:var(--graphite-100);
  --surface-inverse:var(--graphite-900);
  --surface-inverse-raised:var(--graphite-800);
  --surface-accent:var(--gold-500);
  --surface-accent-soft:var(--gold-050);

  /* Text */
  --text-primary:var(--graphite-900);
  --text-secondary:var(--graphite-500);
  --text-muted:var(--graphite-400);
  --text-accent:var(--gold-700);
  --text-on-inverse:var(--graphite-050);
  --text-on-inverse-muted:var(--graphite-300);
  --text-on-accent:var(--graphite-900);

  /* Links & interaction */
  --link:var(--gold-700);
  --link-hover:var(--graphite-900);
  --link-inverse:var(--gold-300);
  --link-inverse-hover:var(--white);
  --focus-ring:var(--gold-500);

  /* Lines — the hairline is a structural motif, not decoration */
  --border-hairline:var(--graphite-200);
  --border-strong:var(--graphite-900);
  --border-accent:var(--gold-500);
  --border-inverse-hairline:rgba(241,241,239,.20);
}

/* ===== tokens/typography.css ===== */
/* chef.ru typography. Sans-only, by decision: Gropled (brand display) + Golos Text (everything
   editorial and interface) + IBM Plex Mono (numerals). No serif anywhere in the system. */
:root{
  --font-display:"Gropled","Golos Text",Helvetica,sans-serif;
  --font-text:"Golos Text","Helvetica Neue",Arial,sans-serif;   /* long-form and titles */
  --font-sans:"Golos Text","Helvetica Neue",Arial,sans-serif;   /* facts, meta, UI */
  --font-serif:var(--font-text);                                 /* legacy alias — resolves to the sans */
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* Fluid editorial scale — mobile first, grows to desktop */
  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:14px;
  --text-base:16px;
  --text-md:clamp(17px, calc(1.2vw + 14px), 19px);
  --text-lg:clamp(20px, calc(1.6vw + 16px), 24px);
  --text-xl:clamp(24px, calc(2.4vw + 18px), 32px);
  --text-2xl:clamp(30px, calc(4vw + 20px), 44px);
  --text-3xl:clamp(38px, calc(6vw + 22px), 64px);
  --text-4xl:clamp(46px, calc(9vw + 24px), 88px);

  --leading-tight:1.04;
  --leading-snug:1.18;
  --leading-normal:1.35;
  --leading-relaxed:1.6;
  --leading-loose:1.72;

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

  /* Tracking: display tightens, small caps-labels open up */
  --tracking-tight:-0.02em;
  --tracking-normal:0;
  --tracking-wide:0.04em;
  --tracking-label:0.14em;

  /* Semantic roles */
  --title-page:var(--text-3xl);          /* «SADKO», «Алексей Волков» — set in --font-display */
  --title-section:var(--text-lg);        /* «SADKO О СЕБЕ» */
  --title-card:var(--text-md);
  --body-size:var(--text-md);
  --body-leading:var(--leading-relaxed);
  --lead-size:var(--text-lg);
  --meta-size:var(--text-sm);
  --label-size:var(--text-xs);
  --dropcap-size:clamp(64px,18vw,132px); /* @kind font */ /* «нет фото → буквица» */
}

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

  /* Vertical rhythm of a material page */
  --block-gap:var(--space-9);        /* between hairline-separated blocks */
  --block-gap-tight:var(--space-7);
  --stack-gap:var(--space-4);        /* inside a block */
  --gutter:var(--space-5);           /* page side padding, mobile */
  --gutter-lg:var(--space-10);

  /* Measures */
  --measure-text:66ch;   /* long-form column */
  --measure-lead:44ch;
  --width-content:800px;   /* centre column — locked to the 800×450 banner */
  --width-banner:800px;
  --banner-ratio:16 / 9; /* @kind other */ /* 800×450 */
  --width-rail-left:240px; /* logo + menu */
  --width-rail:300px;      /* кабинет, сервис, подборки */
  --width-page:1440px;     /* 240 + 800 + 300 + two 50px gutters */
  --rail-gap:var(--space-10);

  /* Grid */
  --grid-gap:var(--space-5);
  --grid-cols-mobile:2; /* @kind other */  /* витрина: two columns on mobile */
}

/* ===== tokens/effects.css ===== */
/* Edges, elevation, motion. Editorial: square corners, hairlines instead of shadows. */
:root{
  --radius-none:0;
  --radius-xs:2px;      /* chips, inputs — barely there */
  --radius-sm:3px;
  --radius-pill:999px;  /* avatars and counters only */

  --hairline:1px;
  --border-thick:2px;
  --rule-hairline:var(--hairline) solid var(--border-hairline);
  --rule-strong:var(--border-thick) solid var(--border-strong);
  --rule-accent:var(--border-thick) solid var(--border-accent);
  --rule-inverse:var(--hairline) solid var(--border-inverse-hairline);

  /* Shadow is reserved for things that float above the page */
  --shadow-none:none;
  --shadow-pop:0 10px 30px -8px rgba(13,13,12,.22),0 2px 6px -2px rgba(13,13,12,.14);
  --shadow-sticky:0 1px 0 0 var(--border-hairline);
  --shadow-image:0 18px 40px -22px rgba(13,13,12,.45);

  /* Protection gradient under captions laid over photography */
  --scrim-bottom:linear-gradient(to top,rgba(13,13,12,.82) 0%,rgba(13,13,12,.45) 45%,rgba(13,13,12,0) 100%); /* @kind other */
  --scrim-flat:rgba(13,13,12,.62);

  /* Motion — fades and hairline reveals; no bounce, no scale-in */
  --dur-instant:80ms;/* @kind other */--dur-fast:140ms;/* @kind other */--dur-base:220ms;/* @kind other */--dur-slow:360ms;/* @kind other */
  --ease-out:cubic-bezier(.22,.68,.28,1);/* @kind other */
  --ease-in-out:cubic-bezier(.5,0,.5,1);/* @kind other */
  --transition-ink:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);

  --blur-header:saturate(160%) blur(14px); /* @kind other */
}

/* ===== tokens/base.css — только внутри нашего документа ===== */
/* Element defaults so a bare page already looks like chef.ru. */
.c-doc *, .c-doc *::before, .c-doc *::after{box-sizing:border-box}
body.c-doc{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-relaxed);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.c-doc h1, .c-doc h2, .c-doc h3, .c-doc h4{font-family:var(--font-text);font-weight:var(--weight-semibold);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);margin:0 0 var(--space-4)}
.c-doc h1{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--title-page);line-height:var(--leading-tight)}
.c-doc h2{font-size:var(--text-xl)}
.c-doc h3{font-size:var(--text-lg)}
.c-doc h4{font-size:var(--text-md)}
.c-doc p{margin:0 0 var(--space-5);text-wrap:pretty}
.c-doc a{color:var(--link);text-decoration:none;border-bottom:var(--hairline) solid transparent;transition:var(--transition-ink)}
.c-doc a:hover{color:var(--link-hover);border-bottom-color:var(--border-accent)}
.c-doc a:active{color:var(--gold-600)}
.c-doc a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-xs)}
.c-doc hr{border:0;border-top:var(--rule-hairline);margin:var(--block-gap) 0}
.c-doc img{max-width:100%;height:auto;display:block}
.c-doc figure{margin:0}
.c-doc figcaption{font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary);line-height:var(--leading-normal);margin-top:var(--space-3)}
.c-doc blockquote{margin:0}
.c-doc ul, .c-doc ol{margin:0 0 var(--space-5);padding-left:var(--space-6)}
.c-doc li{margin-bottom:var(--space-2)}
.c-doc button{font-family:inherit;font-size:inherit}
.c-doc small{font-size:var(--text-xs)}
.c-doc strong{font-weight:var(--weight-semibold)}
.c-doc code, .c-doc kbd{font-family:var(--font-mono);font-size:.92em}
::selection{background:var(--gold-200);color:var(--graphite-900)}

/* Utility roles used across kits and slides */
.chef-longform{font-family:var(--font-text);font-size:var(--body-size);line-height:var(--body-leading);max-width:var(--measure-text)}
.chef-lead{font-family:var(--font-text);font-size:var(--lead-size);line-height:var(--leading-normal);color:var(--text-primary);max-width:var(--measure-lead)}
.chef-label{font-family:var(--font-sans);font-size:var(--label-size);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary)}
.chef-meta{font-family:var(--font-sans);font-size:var(--meta-size);color:var(--text-secondary)}
.chef-block{border-top:var(--rule-hairline);padding-top:var(--space-6);margin-top:var(--block-gap)}
.chef-inverse{background:var(--surface-inverse);color:var(--text-on-inverse)}
.chef-inverse a{color:var(--link-inverse)}
.chef-inverse a:hover{color:var(--link-inverse-hover);border-bottom-color:var(--gold-400)}