/* ============================================================
   ATA DALA PRODUCTION — «ANAMORPHOT» (dark, cinematic, red accent)
   tokens.css — the single source of truth for colour, type,
   rhythm, timing and layers. Page styles must NEVER hardcode a
   colour, size or duration — reference a token.
   Ported from the anamorphot reference v2; the turquoise accent
   is replaced by the Ata Dala brand RED #E31917, with a lightened
   ink tint for small accent text (contrast >= 4.5:1).
   ============================================================ */

:root {
  /* ---------- COLOUR --------------------------------------
     Base is a cold blue-black #0D1114, NOT pure #000. Pure black
     is reserved for the letterbox bars #050708 — deeper than the
     page, they "switch the frame off". */
  --c-bg:        #0D1114;   /* document background                   */
  --c-surface:   #161B1F;   /* panel, card, strip on hover           */
  --c-surface-2: #1E2429;   /* raised surface                        */
  --c-text:      #EDEFEF;   /* primary text            16.5 : 1 ok   */
  --c-muted:     #8A9298;   /* muted text               6.05 : 1 ok  */
  --c-line:      #242B31;   /* borders, 1px decorative               */
  --c-letterbox: #050708;   /* the 2.39:1 frame bars                 */

  /* ACCENT — Ata Dala brand red.
     #E31917 on #0D1114 ~= 4.0:1: good for LARGE/bold text, borders,
     plates, graphics and hover — NOT for small text.
     --c-accent-ink is a lightened tint for small accent text/links:
     #FF6A5A on #0D1114 ~= 6.8:1 ok. Body copy stays --c-text. */
  --c-accent:      #E31917;  /* large/bold, borders, dots, hover, plates */
  --c-accent-ink:  #FF6A5A;  /* small accent text + inline links  6.8:1 */
  --c-accent-deep: #B5120F;  /* pressed / deep red                    */
  --on-accent:     #0D1114;  /* text on a solid red fill (large/bold) */

  /* Derived — only via color-mix, so we never breed new hex */
  --c-line-strong:  #39434B;                                   /* border on hover */
  --c-accent-dim:   color-mix(in srgb, var(--c-accent) 22%, transparent);
  --c-accent-ghost: color-mix(in srgb, var(--c-accent) 10%, transparent);
  --c-scrim:        color-mix(in srgb, var(--c-bg) 88%, transparent);  /* over a frame */
  --c-scrim-soft:   color-mix(in srgb, var(--c-bg) 55%, transparent);
  --c-scrim-hdr:    color-mix(in srgb, var(--c-bg) 82%, transparent);  /* header prop */
  --c-selection:    color-mix(in srgb, var(--c-accent) 30%, transparent);

  /* Opacity for mask-image. This is NOT paint and NOT a #000
     violation: only the alpha channel of a mask is read. */
  --mask-opaque: #000;

  /* Placeholder gradient behind a frame while the image loads */
  --g-frame: linear-gradient(180deg, var(--c-surface-2), var(--c-bg));
  /* Vertical scrim to the background at the bottom — hero, cards */
  --g-scrim: linear-gradient(180deg, transparent 34%, var(--c-scrim) 100%);

  /* ---------- TYPE ----------------------------------------
     One family across the whole site: Golos Text. No serif, no mono.
     "Service" styling is solved by weight 600 + uppercase + tracking. */
  --f-display: 'Golos Text', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Golos Text', 'Helvetica Neue', Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;   /* service only: uppercase + tracking +0.1em */
  --fw-bold:    700;

  /* ---------- TYPE SCALE ----------------------------------
     Size / tracking / leading travel in triples — never split them.
     H0–H2 use normal case + negative tracking. Uppercase only for
     meta and labels. */
  --fs-display: clamp(3rem, 7vw, 7rem);            /* H0  48 -> 112px */
  --fs-h1:      clamp(2.125rem, 4vw, 4.5rem);      /* H1  34 -> 72px  */
  --fs-h2:      clamp(1.5rem, 2.6vw, 2.375rem);    /* H2  24 -> 38px  */
  --fs-h3:      1.25rem;                            /* H3  20px        */
  --fs-lead:    clamp(1.0625rem, 1vw + 0.8rem, 1.375rem); /* lead 17 -> 22px */
  --fs-title:   1.375rem;                           /* project title 22px */
  --fs-body:    clamp(0.9375rem, 0.35vw + 0.86rem, 1rem); /* 15 -> 16px */
  --fs-small:   0.75rem;                            /* meta, labels 12px */

  /* Large editorial sizes — catalogue list, roster rows, numbers */
  --fs-list:    clamp(2.25rem, 6vw, 5.5rem);        /* 36 -> 88px */
  --fs-row:     clamp(1.625rem, 4vw, 3.5rem);       /* 26 -> 56px */
  --fs-quote:   clamp(1.5rem, 3.4vw, 3rem);         /* 24 -> 48px */
  --fs-num:     clamp(3.25rem, 9vw, 8rem);          /* 52 -> 128px */
  --fs-mail:    clamp(1.5rem, 6vw, 5.5rem);         /* 24 -> 88px; floor lowered so arslanfilm13@gmail.com fits one line at 360px (was breaking as "…mail.r / u") */

  --lh-display: 0.94;
  --lh-h1:      0.98;
  --lh-h2:      1.04;
  --lh-h3:      1.15;
  --lh-list:    0.94;
  --lh-body:    1.6;
  --lh-flat:    1;

  --tr-display: -0.035em;   /* H0, lists, numbers, mail */
  --tr-h1:      -0.03em;
  --tr-h2:      -0.025em;
  --tr-h3:      -0.015em;
  --tr-title:   -0.01em;
  --tr-body:    -0.003em;
  --tr-label:   0.1em;      /* the ONLY positive tracking: 12px/600/uppercase */

  --measure:      66ch;              /* text column */
  --measure-col:  min(38rem, 92vw);  /* left-hugged text block */
  --measure-wide: min(58rem, 92vw);  /* manifesto / wide prose */

  /* ---------- SPACE --------------------------------------- */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px — base grid gap */
  --sp-6:  1.5rem;    /* 24px */
  --sp-7:  2rem;      /* 32px */
  --sp-8:  2.5rem;    /* 40px */
  --sp-9:  3.5rem;    /* 56px */
  --sp-10: 5rem;      /* 80px */
  --sp-11: 7rem;      /* 112px */
  --sp-12: 10rem;     /* 160px — vertical pause between sections */

  /* Layout. Content sits in a centred container; frames go full-bleed. */
  --container:      80rem;   /* 1280px — text + card sections   */
  --container-wide: 92.5rem; /* 1480px — wide feature rows       */
  --container-text: 66ch;    /* reading column                  */
  --gutter:  clamp(1.25rem, 4vw, 4rem);   /* padding-inline 20 -> 64px */
  --header-h: 4.5rem;                     /* 72px sticky header      */
  --grid-cols: 4;                         /* 1fr 1fr 1fr 1fr         */
  --grid-gap:  var(--sp-5);

  /* ---------- FRAME FORMAT --------------------------------
     Ratios don't mix. Each keeps to its place. */
  --ar-scope:    2.39 / 1;   /* cinemascope: hero, detail frames */
  --ar-wide:     16 / 9;     /* reel, service tiles              */
  --ar-portrait: 2 / 3;      /* vertical frame, portrait         */

  /* Letterbox bar height for a 2.39:1 frame inside 100svh:
     (100svh - 100vw/2.39) / 2, never below zero. */
  --letterbox-h: max(0px, calc((100svh - 100vw / 2.39) / 2));

  /* ---------- BORDERS, RADII, SHADOWS --------------------- */
  --bw:            1px;
  --border:        var(--bw) solid var(--c-line);
  --border-strong: var(--bw) solid var(--c-line-strong);

  --r-0:    0;        /* default is a square corner: it's a frame, not a chip */
  --r-1:    2px;
  --r-pill: 999px;    /* only the "> Watch" pill */

  --sh-1: 0 1px 0 0 var(--c-line);
  --sh-2: 0 var(--sp-2) var(--sp-7) color-mix(in srgb, var(--c-letterbox) 60%, transparent);
  --sh-lift: 0 var(--sp-4) var(--sp-10) color-mix(in srgb, var(--c-letterbox) 72%, transparent);
  --sh-focus: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent);

  /* ---------- TIME & EASING ------------------------------
     The language is editing: 160–320ms. No soft fade > 320ms
     on an interaction. */
  --d-instant: 90ms;
  --reveal-shift: 1.75rem;  /* подъём блока при появлении */
  --d-fast:    160ms;   /* dimming inactive rows */
  --d-cut:     220ms;   /* section cut, frame crossfade — base */
  --d-slow:    260ms;   /* portrait reveal, backdrop swap */
  --d-reveal:  760ms;  /* появление блоков при прокрутке */
  --d-max:     320ms;   /* interaction ceiling. No more */
  --d-grain:   0.6s;    /* grain jitter, steps(8) */
  --d-ticker:  60s;     /* ticker loop */

  --e-out:    cubic-bezier(0.2, 0, 0, 1);        /* exit, crossfade */
  --e-cut:    cubic-bezier(0.85, 0, 0.15, 1);    /* the cut — almost a click */
  --e-ease:   ease-out;                          /* row dimming */
  --e-reveal: cubic-bezier(0.16, 1, 0.3, 1);     /* мягкий выход появления */
  --e-linear: linear;                            /* anything tied to scroll */

  /* ---------- GRAIN --------------------------------------- */
  --grain-opacity: 0.32;
  --grain-blend:   overlay;

  /* ---------- LAYERS -------------------------------------- */
  --z-base:      0;
  --z-frame:     1;    /* frame inside a section */
  --z-scrim:     2;    /* gradient over a frame  */
  --z-content:   3;    /* text over a frame      */
  --z-letterbox: 20;   /* the cropping bars      */
  --z-menu:      55;   /* menu panel — above the page… */
  --z-header:    60;   /* …but under the header: the toggle must stay clickable */
  --z-grain:     9000; /* grain — above everything but focus */
  --z-skip:      9500; /* "skip to content" */
}