/* ============================================================================
   Toloka Gopher TSR — Design Tokens
   ----------------------------------------------------------------------------
   Source of truth: live toloka.vc Webflow build
   (css/toloka-v2.webflow.shared.*.css). Values below are extracted 1:1 so the
   landing reads as a true Toloka sub-brand. When the official Webflow style
   guide is finalized, reconcile any drift HERE only — every component consumes
   these variables, nothing hardcodes a hex.

   Webflow port note: these mirror Toloka's Webflow Variable Collection
   (e.g. --_variable-collection---black, --grey-background). Names are kept
   close so mapping into Designer is mechanical.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --color-ink:            #1e1f27; /* primary text  (Webflow --black)        */
  --color-black-deep:     #161406; /* deepest brand black                    */
  --color-secondary:      #282936; /* dark blue-grey (Webflow --blue-secondary) */
  --color-accent:         #ffe16a; /* PRIMARY CTA + "Available now" badge    */
  --color-accent-soft:    #82731033; /* default .button translucent fill     */
  --color-bg:             #ffffff; /* page base                              */
  --color-bg-muted:       #f5f5f5; /* light section background               */
  --color-border:         #efefef; /* hairline borders (Webflow --gray-border) */
  --color-text-muted:     #737373; /* secondary text (Webflow --gray2)       */
  --color-text-faint:     #b3b1bd; /* disabled / faint (Webflow --gray)      */
  --color-white:          #ffffff;

  /* Status badges */
  --badge-available-bg:   var(--color-accent);
  --badge-available-text: var(--color-ink);
  --badge-experimental-bg: transparent;          /* outline / muted style    */
  --badge-experimental-border: var(--color-text-faint);
  --badge-experimental-text: var(--color-text-muted);

  /* Feedback (form validation) — derived, not in Toloka palette; AA-checked */
  --color-error:          #c0392b;
  --color-success:        #1e7d4f;

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500; /* body / buttons */
  --fw-semibold:600;
  --fw-bold:    700; /* headings       */

  /* Type scale (px values as used on toloka.vc) */
  --fs-display-xl: 124px; /* oversized hero / stat numerals               */
  --fs-display-l:  80px;
  --fs-display-m:  56px;
  --fs-h1:         44px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         18px;
  --fs-lead:       24px;  /* large supporting copy                        */
  --fs-body:       20px;  /* DEFAULT body / paragraph                     */
  --fs-ui:         16px;  /* buttons, labels, nav  (Toloka .t16)          */
  --fs-small:      14px;  /* badges, microcopy, captions                  */

  --lh-tight:   1.2;
  --lh-heading: 1.25;
  --lh-body:    1.5;   /* Toloka uses 150% widely                         */

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm:   8px;   /* buttons (.button base)                         */
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;  /* cards / rounded CTAs (.round)                  */
  --radius-pill: 100px; /* badges / pills                                 */

  /* ---- Spacing (8px base; matches Toloka 16/20/24/32 paddings) -------- */
  --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-30: 120px;  /* section vertical rhythm                         */

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 1240px; /* toloka.vc container                         */
  --container-pad: 24px;   /* gutter on small screens                     */

  /* ---- Buttons (from .button / .button.huge / .button.yellow) -------- */
  --btn-pad-y:        16px;
  --btn-pad-x:        20px;
  --btn-pad-x-huge:   32px;
  --btn-radius:       var(--radius-sm);
  --btn-radius-round: var(--radius-2xl);
  --btn-font-weight:  var(--fw-medium);
  --btn-gap:          10px;
  --btn-transition:   background-color .2s ease, border-color .2s ease, color .2s ease;

  /* ---- Misc ------------------------------------------------------------- */
  --transition-fast: .2s ease;
  --shadow-card: 0 1px 2px rgba(22, 20, 6, .04), 0 8px 24px rgba(22, 20, 6, .06);
  --focus-ring: 0 0 0 3px rgba(255, 225, 106, .6); /* accent-based, AA      */

  /* ---- ASCII hero (3D model → ASCII art + white/black ripple) ----------- */
  --hero-bg:        var(--color-accent); /* #ffe16a — canvas background      */
  --hero-ascii-on:  var(--color-white);  /* ripple crest glyph color (white) */
  --hero-ascii-off: var(--color-ink);    /* ripple trough glyph color (ink)  */
}

/* Reduced motion: consumers should gate animation on this. */
@media (prefers-reduced-motion: reduce) {
  :root { --transition-fast: 0s; --btn-transition: none; }
}