/*
  Anurag Studio design tokens.
  Shared by the company profile, its PDF, and the anuragstudio.com revamp.
  Brand colours are fixed: ink, off-white, and the red from the dot on the i.
*/
/* Fonts load from <link> tags in each page head (preconnected), not an @import chain. */

:root {
  /* colour */
  --ink: #08090B;          /* page */
  --ink-2: #111216;        /* raised surface */
  --ink-3: #1A1B20;        /* card, input */
  --line: #26272D;         /* hairlines on ink */
  --paper: #F4F3F0;        /* primary text, logos */
  --paper-2: #C9C8C4;      /* body text on ink */
  --mute: #8E8E94;         /* captions, metadata (6.3:1 on ink) */
  --red: #BE1622;          /* brand red: fills, buttons, the playhead */
  --red-hi: #E6333F;       /* brand red for small text on ink (4.9:1) */

  /* type */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --fs-title: clamp(56px, 10vw, 168px);    /* title cards */
  --fs-h1: clamp(44px, 7vw, 112px);
  --fs-h2: clamp(34px, 4.6vw, 72px);
  --fs-h3: clamp(22px, 2vw, 30px);
  --fs-lead: clamp(19px, 1.6vw, 23px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-mono: 12px;

  --lh-tight: 0.92;
  --lh-head: 1.04;
  --lh-body: 1.6;
  --track-display: -0.035em;

  /* space */
  --gutter: clamp(16px, 4vw, 56px);
  --section: clamp(96px, 14vh, 180px);
  --max: 1360px;

  /* shape: media 14px, buttons pill, nothing else rounded */
  --radius-media: 14px;
  --radius-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);        /* entrances, presses */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);   /* things moving on screen: wipes, line draws */
  --dur-fast: 180ms;
  --dur-base: 420ms;
  --dur-slow: 900ms;

  /* layers */
  --z-chrome: 40;
  --z-grain: 60;

  /* legibility over live footage: tight edge, mid glow, wide falloff */
  --tshadow: 0 1px 2px rgba(5,5,8,.9), 0 3px 12px rgba(5,5,8,.6), 0 10px 40px rgba(5,5,8,.55);
}