/* Бастион — design tokens. Перенесено 1:1 из handoff_bastion_docs/tokens/. */

/* Бастион — colour system.
   Warm near-black + off-white, with a single saturated orange reserved for CTAs and
   emphasis. Semantic colours are functional only: they appear in form states, alerts
   and status pills, never as decoration. */
:root{
  /* ── Base: warm neutrals (sampled from the reference composition) ── */
  --ink-950:#121110;
  --ink-900:#171614;
  --ink-800:#1f1e1b;
  --ink-700:#2a2926;
  --ink-600:#3a3833;
  --ink-500:#55524b;
  --ink-400:#6e6b64;
  --ink-300:#98948c;
  --ink-200:#c9c5be;
  --ink-100:#e4e1dc;
  --ink-50:#edebe7;
  --ink-25:#f7f7f6;
  --white:#ffffff;

  /* ── Base: brand orange ── */
  --orange-700:#a8460f;
  --orange-600:#c6551a;
  --orange-500:#f0752b;
  --orange-400:#f79358;
  --orange-300:#fbbe95;
  --orange-100:#fde6d6;
  --orange-50:#fef4ec;

  /* ── Base: functional hues ── */
  --green-600:#17734f;
  --green-500:#1e8f62;
  --green-50:#e8f5ef;
  --red-600:#a32319;
  --red-500:#c4372b;
  --red-50:#fbebe9;
  --amber-600:#96600f;
  --amber-500:#b8791a;
  --amber-50:#fcf3e3;
  --blue-600:#25578f;
  --blue-500:#2f6db5;
  --blue-50:#eaf1fa;

  /* ── Semantic: surfaces ── */
  --surface-page:var(--ink-25);
  --surface-card:var(--white);
  --surface-card-muted:var(--ink-50);
  --surface-sunken:var(--ink-100);
  --surface-inverse:var(--ink-900);
  --surface-inverse-raised:var(--ink-700);
  --surface-accent:var(--orange-500);
  --surface-accent-soft:var(--orange-50);
  --surface-overlay:rgba(18,17,16,.56);
  --surface-glass:rgba(255,255,255,.08);

  /* ── Semantic: text ── */
  --text-heading:var(--ink-900);
  --text-body:var(--ink-600);
  --text-muted:var(--ink-500);
  --text-subtle:var(--ink-400);
  --text-disabled:var(--ink-300);
  --text-accent:var(--orange-500);
  --text-on-accent:var(--white);
  --text-on-inverse:var(--white);
  --text-on-inverse-muted:rgba(255,255,255,.66);
  --text-on-inverse-subtle:rgba(255,255,255,.44);
  --text-link:var(--orange-500);
  --text-link-hover:var(--orange-600);

  /* ── Semantic: borders ── */
  --border-subtle:var(--ink-100);
  --border-default:var(--ink-200);
  --border-strong:var(--ink-300);
  --border-inverse:rgba(255,255,255,.14);
  --border-inverse-strong:rgba(255,255,255,.28);
  --border-accent:var(--orange-500);

  /* ── Semantic: interactive ── */
  --action-primary:var(--orange-500);
  --action-primary-hover:var(--orange-600);
  --action-primary-active:var(--orange-700);
  --action-secondary:var(--ink-900);
  --action-secondary-hover:var(--ink-800);
  --action-secondary-active:var(--ink-950);
  --action-ghost-hover:var(--ink-50);
  --action-ghost-hover-inverse:rgba(255,255,255,.08);
  --action-disabled-bg:var(--ink-100);
  --action-disabled-text:var(--ink-300);
  --focus-ring-color:rgba(240,117,43,.32);

  /* ── Semantic: feedback (functional only) ── */
  --success-fg:var(--green-600);
  --success-bg:var(--green-50);
  --success-border:var(--green-500);
  --danger-fg:var(--red-600);
  --danger-bg:var(--red-50);
  --danger-border:var(--red-500);
  --warning-fg:var(--amber-600);
  --warning-bg:var(--amber-50);
  --warning-border:var(--amber-500);
  --info-fg:var(--blue-600);
  --info-bg:var(--blue-50);
  --info-border:var(--blue-500);
}

/* Бастион — typography. One family (Manrope) across the whole system.
   Display sizes are set tight and heavy; body copy is set loose for Cyrillic legibility. */
:root{
  --font-core:'Manrope',-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --font-display:var(--font-core);
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

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

  /* Sizes — desktop */
  --size-display-1:64px;
  --size-display-2:52px;
  --size-h1:44px;
  --size-h2:36px;
  --size-h3:28px;
  --size-h4:22px;
  --size-h5:18px;
  --size-body-lg:18px;
  --size-body:16px;
  --size-body-sm:14px;
  --size-caption:13px;
  --size-eyebrow:15px;

  /* Sizes — mobile (≤ 720px) */
  --size-display-1-m:38px;
  --size-display-2-m:32px;
  --size-h1-m:29px;
  --size-h2-m:25px;
  --size-h3-m:21px;
  --size-h4-m:18px;

  /* Line heights */
  --leading-tight:1.04; 
  --leading-display:1.1; 
  --leading-heading:1.2; 
  --leading-snug:1.35; 
  --leading-body:1.6; 
  --leading-relaxed:1.7; 

  /* Tracking — Cyrillic display needs less negative tracking than Latin */
  --tracking-display:-0.02em; 
  --tracking-heading:-0.01em; 
  --tracking-normal:0; 
  --tracking-label:0.01em; 
  --tracking-eyebrow:0; 

  /* Composite semantic styles */
  --type-display:var(--weight-extrabold) var(--size-display-1)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-extrabold) var(--size-h1)/var(--leading-display) var(--font-display);
  --type-h2:var(--weight-bold) var(--size-h2)/var(--leading-display) var(--font-display);
  --type-h3:var(--weight-bold) var(--size-h3)/var(--leading-heading) var(--font-display);
  --type-h4:var(--weight-semibold) var(--size-h4)/var(--leading-snug) var(--font-core);
  --type-h5:var(--weight-semibold) var(--size-h5)/var(--leading-snug) var(--font-core);
  --type-body-lg:var(--weight-regular) var(--size-body-lg)/var(--leading-body) var(--font-core);
  --type-body:var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-core);
  --type-body-sm:var(--weight-regular) var(--size-body-sm)/var(--leading-body) var(--font-core);
  --type-label:var(--weight-semibold) var(--size-body-sm)/var(--leading-snug) var(--font-core);
  --type-caption:var(--weight-medium) var(--size-caption)/var(--leading-snug) var(--font-core);
  --type-eyebrow:var(--weight-semibold) var(--size-eyebrow)/1.2 var(--font-core);
  --type-button:var(--weight-semibold) var(--size-body)/1 var(--font-core);
}

/* Бастион — spacing. 4px base; the composition leans on the large end (40/64/96)
   so sections breathe and cards sit far apart. */
:root{
  --space-0:0;
  --space-1:2px;
  --space-2:4px;
  --space-3:6px;
  --space-4:8px;
  --space-5:12px;
  --space-6:16px;
  --space-7:20px;
  --space-8:24px;
  --space-9:32px;
  --space-10:40px;
  --space-11:48px;
  --space-12:64px;
  --space-13:80px;
  --space-14:96px;
  --space-15:120px;
  --space-16:160px;

  /* Semantic rhythm */
  --gap-inline:8px;          /* icon ↔ label */
  --gap-tight:12px;          /* stacked labels */
  --gap-card:24px;           /* grid gutter between cards */
  --gap-stack:16px;          /* form fields */
  --pad-card:24px;
  --pad-card-lg:32px;
  --pad-panel:40px;
  --pad-section-y:96px;
  --pad-section-y-m:56px;
  --pad-page-x:40px;
  --pad-page-x-m:20px;
}

/* Бастион — corner radii. Nested-panel logic: big soft outer panels (36) hold
   cards (20) which hold chips (pill). Buttons and pills are always fully round. */
:root{
  --radius-xs:8px;
  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-2xl:36px;
  --radius-pill:999px;
  --radius-circle:50%;

  --radius-button:var(--radius-pill);
  --radius-input:14px;
  --radius-chip:var(--radius-pill);
  --radius-card:var(--radius-lg);
  --radius-panel:var(--radius-xl);
  --radius-section:var(--radius-2xl);
  --radius-image:var(--radius-md);
  --radius-icon-tile:12px;
}

/* Бастион — elevation, overlays, blur.
   Shadows are warm (tinted with the ink hue), wide and low-opacity — never grey/blue,
   never a hard drop. On dark surfaces elevation is expressed with a hairline border
   and a lighter fill instead of a shadow. */
:root{
  --shadow-xs:0 1px 2px rgba(23,22,20,.06);
  --shadow-sm:0 2px 8px rgba(23,22,20,.06);
  --shadow-md:0 8px 24px -8px rgba(23,22,20,.12),0 2px 6px rgba(23,22,20,.04);
  --shadow-lg:0 24px 48px -16px rgba(23,22,20,.16),0 4px 12px rgba(23,22,20,.05);
  --shadow-xl:0 40px 80px -24px rgba(23,22,20,.22),0 8px 20px rgba(23,22,20,.06);
  --shadow-accent:0 12px 28px -10px rgba(240,117,43,.5);
  --shadow-hairline:inset 0 0 0 1px rgba(23,22,20,.06);
  --shadow-hairline-inverse:inset 0 0 0 1px rgba(255,255,255,.1);
  --shadow-focus:0 0 0 3px var(--focus-ring-color);

  /* Protection gradients — laid over photography so text stays legible */
  --scrim-bottom:linear-gradient(180deg,rgba(18,17,16,0) 0%,rgba(18,17,16,.28) 46%,rgba(18,17,16,.82) 100%); 
  --scrim-left:linear-gradient(90deg,rgba(18,17,16,.92) 0%,rgba(18,17,16,.7) 34%,rgba(18,17,16,0) 68%); 
  --scrim-flat:rgba(18,17,16,.56); 
  --scrim-accent:linear-gradient(180deg,rgba(240,117,43,0) 0%,rgba(166,66,12,.55) 100%); 

  /* Glass — used only for controls floating on photography */
  --blur-glass:saturate(150%) blur(16px); 
  --blur-scrim:blur(28px); 
}

/* Бастион — motion. Calm and short: fades, small lifts, colour crossfades.
   No bounce, no spring, no overshoot — the brand is protective, not playful. */
:root{
  --dur-instant:80ms; 
  --dur-fast:140ms; 
  --dur-base:220ms; 
  --dur-slow:360ms; 
  --dur-reveal:560ms; 

  --ease-standard:cubic-bezier(.2,.6,.2,1); 
  --ease-out:cubic-bezier(.16,.84,.44,1); 
  --ease-in-out:cubic-bezier(.65,0,.35,1); 

  --transition-color:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard); 
  --transition-lift:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard); 
  --transition-all:all var(--dur-base) var(--ease-standard); 

  --lift-hover:translateY(-2px); 
  --lift-card-hover:translateY(-4px); 
  --press-scale:scale(.985); 
}
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-instant:0ms; 
    --dur-fast:0ms; 
    --dur-base:0ms; 
    --dur-slow:0ms; 
    --dur-reveal:0ms; 
    --lift-hover:none; 
    --lift-card-hover:none; 
    --press-scale:none; 
  }
}

/* Бастион — layout. Content sits in a 1280 container inside a full-width dark page;
   light sections are inset rounded panels (radius 36) floating on the dark background. */
:root{
  --container-max:1280px;
  --container-narrow:760px;
  --container-form:520px;
  --header-height:72px;
  --header-inset:16px;      /* the floating header's gap from the viewport edge */
  --grid-columns:12; 
  --grid-gutter:24px;
  --panel-inset:16px;       /* light panel inset from the dark page edge */
  --breakpoint-mobile:720px;
  --breakpoint-tablet:1024px;
  --breakpoint-desktop:1280px;
  --z-base:0; 
  --z-sticky:100; 
  --z-header:200; 
  --z-dropdown:300; 
  --z-overlay:400; 
  --z-modal:500; 
  --z-toast:600; 
  --z-tooltip:700; 
}