/* ==========================================================================
   Cybernetika Design System — Tokens
   Source: Cybernetika_Design_System_Specification.md
   Do not hand-edit values without updating the design system doc first.
   ========================================================================== */

:root {
  /* ---- Color (§1.3) ---- */
  --color-bg: #FAF9F5;
  --color-bg-alt: #F2EFE8;
  --color-paper: #FFFFFF;
  --color-ink: #2A2A35;
  --color-ink-soft: #58565F;
  --color-ink-faint: #67666C;
  --color-line: #E4E0D7;
  --color-line-strong: #D8D3C8;
  --color-purple: #7B2D8B;
  --color-purple-light: #8C479A;
  --color-purple-tint: #F5EDF7;
  --color-white: #FFFFFF;

  /* ---- Type families (§1.4) ---- */
  --font-display: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica Neue, Arial, sans-serif;
  --font-editorial: "Lora", Georgia, "Times New Roman", serif;

  /* ---- Type scale — desktop (§1.4) ---- */
  --type-display-size: 74px;   --type-display-lh: 1.04; --type-display-ls: -0.015em;
  --type-h2-size: 42px;        --type-h2-lh: 1.15;      --type-h2-ls: -0.01em;
  --type-h3-size: 24px;        --type-h3-lh: 1.3;       --type-h3-ls: -0.005em;
  --type-h4-size: 18px;        --type-h4-lh: 1.3;       --type-h4-ls: normal;
  --type-body-l-size: 19px;    --type-body-l-lh: 1.55;
  --type-body-m-size: 15px;    --type-body-m-lh: 1.55;
  --type-body-s-size: 13px;    --type-body-s-lh: 1.5;
  --type-label-size: 11.5px;   --type-label-lh: 1.4;    --type-label-ls: 0.16em;
  --type-label-sm-size: 10px;  --type-label-sm-lh: 1.4; --type-label-sm-ls: 0.1em;
  --type-editorial-size: 15.5px; --type-editorial-lh: 1.4;
  --type-metric-l-size: 46px;  --type-metric-l-lh: 1.1;
  --type-metric-s-size: 30px;  --type-metric-s-lh: 1.1;
  --type-index-size: 20px;     --type-index-lh: 1;
  --type-button-size: 12.5px;  --type-button-lh: 1;     --type-button-ls: 0.09em;

  /* ---- Spacing scale — 4pt base (§2.3) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 160px;

  /* ---- Grid (§2.2) ---- */
  --container-max: 1472px;
  --gutter: 24px;
  --margin-wide: 64px;
  --margin-desktop: 48px;
  --margin-tablet: 40px;
  --margin-mobile: 22px;

  /* ---- Motion (§7.2) ---- */
  --ease-draw: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-state: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Mobile type scale overrides (§1.4) ---- */
@media (max-width: 767px) {
  :root {
    --type-display-size: 33px;   --type-display-lh: 1.14;
    --type-h2-size: 25px;        --type-h2-lh: 1.2;
    --type-h3-size: 19px;        --type-h3-lh: 1.3;
    --type-h4-size: 16px;        --type-h4-lh: 1.3;
    --type-body-l-size: 14.5px;  --type-body-l-lh: 1.55;
    --type-body-m-size: 13.5px;  --type-body-m-lh: 1.55;
    --type-body-s-size: 12.5px;  --type-body-s-lh: 1.5;
    --type-label-size: 10px;     --type-label-lh: 1.4;
    --type-label-sm-size: 9px;   --type-label-sm-lh: 1.4;
    --type-editorial-size: 12.5px; --type-editorial-lh: 1.4;
    --type-metric-l-size: 36px;  --type-metric-l-lh: 1.1;
    --type-metric-s-size: 20px;  --type-metric-s-lh: 1.1;
    --type-index-size: 15px;     --type-index-lh: 1;
    --type-button-size: 11.5px;  --type-button-lh: 1;
  }
}