/* ==========================================================================
   DEE MAK — DESIGN TOKENS
   Implements Section 17 of the Design System & Visual Specification v1.0.
   Section 17 is binding. Do not add colours or sizes that are not defined here.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- COLORS */
  --ink: #121212;
  --ink-deep: #0a0a0a;
  --ink-raised: #1a1a1a;
  --paper: #f4f4f2;
  --studio-grey: #e6e7ec;
  --studio-grey-deep: #d6d8e0;

  --accent: #e8541e;
  --accent-hover: #f2632e;
  --accent-active: #c9440f;
  --accent-ink: #c9440f; /* orange on light backgrounds only — never as text */

  --text-primary-dark: #f4f4f2;
  --text-secondary-dark: #a8a8a5;
  --text-muted-dark: #8a8a87;
  --text-primary-light: #121212;
  --text-secondary-light: #4a4a47;
  --text-muted-light: #6e6e6b;

  --border-dark: rgba(244, 244, 242, 0.14);
  --border-dark-strong: rgba(244, 244, 242, 0.32);
  --border-light: rgba(18, 18, 18, 0.12);
  --border-light-strong: rgba(18, 18, 18, 0.28);

  --cta-label: #121212; /* Section 18.3 — approved: near-black on orange */
  --cta-disabled-bg: rgba(232, 84, 30, 0.28);
  --cta-disabled-label: rgba(18, 18, 18, 0.5);

  /* ------------------------------------------------------------ TYPOGRAPHY */
  --font-family: "Archivo Variable", "Archivo", "Helvetica Neue", Helvetica,
    Arial, system-ui, sans-serif;
  /* Заголовок DEE MAK на Hero — правка клиента. Условный (не variable)
     шрифт, поэтому никаких font-variation-settings/font-stretch не нужно —
     код проще, чем было с Archivo. */
  --font-display: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --fv-numeric: tabular-nums;

  --fs-display-xl: clamp(3.9rem, 25.5vw, 8.9rem); /* уменьшено на 15% по правке клиента */
  --fs-display-lg: clamp(2.25rem, 11.5vw, 3.5rem);
  --fs-display-md: clamp(2rem, 9.5vw, 3rem);
  --fs-h2: clamp(1.5rem, 7.2vw, 2.25rem);
  --fs-h3: clamp(1.0625rem, 4.6vw, 1.25rem);
  --fs-body-lg: clamp(1rem, 4.1vw, 1.0625rem);
  --fs-body: 0.9375rem;
  --fs-body-sm: 0.875rem;
  --fs-label: 0.6875rem;
  --fs-label-lg: clamp(0.75rem, 3.4vw, 0.8125rem);
  --fs-meta: 0.8125rem;
  --fs-button: 0.875rem;
  --fs-numeral-lg: clamp(2.75rem, 14vw, 4.5rem);
  --fs-numeral-sm: 0.75rem;

  --lh-display: 0.82;
  --lh-display-lg: 0.94;
  --lh-heading: 1.05;
  --lh-title: 1.2;
  --lh-body: 1.6;
  --lh-tight: 1;

  --ls-display: -0.02em;
  --ls-heading: 0.02em;
  --ls-title: 0.06em;
  --ls-label: 0.18em;
  --ls-label-lg: 0.14em;
  --ls-button: 0.12em;
  --ls-meta: 0.04em;

  --wdth-display: 72;
  --wdth-display-lg: 84;
  --wdth-heading: 88;
  --wdth-body: 100;

  --fw-black: 900;
  --fw-extrabold: 800;
  --fw-bold: 700;
  --fw-semibold: 600;
  --fw-medium: 500;
  --fw-regular: 400;

  /* --------------------------------------------------------------- SPACING */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 120px;

  --gutter: clamp(1.25rem, 6.4vw, 2rem);
  --section-pt: clamp(3.5rem, 14vw, 5.5rem);
  --section-pb: clamp(3rem, 12vw, 5rem);
  --grid-gap: 8px;
  --rule-width: 32px;
  --content-max: 560px;
  --bleed-max: 720px;

  /* ---------------------------------------------------------------- RADIUS */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;

  /* --------------------------------------------------------------- BORDERS */
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 3px;

  /* --------------------------------------------------------------- BUTTONS */
  --btn-h-primary: 56px;
  --btn-h-secondary: 52px;
  --btn-h-min: 48px;
  --btn-padding-x: 24px;
  --btn-gap: 12px;
  --touch-min: 48px;
  --touch-spacing: 8px;

  /* ------------------------------------------------------------- ANIMATION */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-reveal: 720ms;
  --dur-cinematic: 1000ms;

  --stagger-tight: 40ms;
  --stagger-base: 60ms;
  --stagger-loose: 90ms;

  /* -------------------------------------------------- DERIVED / STRUCTURAL */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* Единый верхний отступ для секций 02-05 (About/Portfolio/Video/What I
     Can Do) — правка клиента: номер страницы (02, 03...) должен быть на
     одном горизонте с иконкой меню. Иконка меню: top = max(16px, safe-t),
     центр иконки = top + 24px (высота кнопки 48px). Номер страницы (шрифт
     0.75rem, line-height:1) имеет визуальный центр на ~6px ниже своего
     top-края, поэтому отступ до самого номера = центр иконки - 6px. */
  --section-header-pt: calc(max(16px, var(--safe-t)) + 18px);

  /* Folio Rail removed per client revision — content padding is now just
     gutter + safe-area, no rail clearance needed. */
  --pad-x: max(var(--gutter), var(--safe-l));
  --pad-x-end: max(var(--gutter), var(--safe-r));
}

/* ВРЕМЕННО ОТКЛЮЧЕНО — блокировка десктопной адаптации (правка клиента).
   Этот медиа-запрос завязан на ширину viewport, а не на .shell, поэтому
   сработал бы даже при max-width:480px на .shell. Вернуть, когда начнётся
   работа над десктоп-версией.
@media (min-width: 640px) {
  :root {
    --gutter: 2rem;
  }
}
*/