/* ==========================================================================
   SNS design system: type, spacing, grid and motion tokens.
   NO COLOUR VALUES IN THIS FILE. Every colour lives in theme.css.

   Unit system (TEARDOWN A1, addendum 1): the reference sets html{font-size:1vw}
   which blocks browser zoom from enlarging text (WCAG 1.4.4). Here the same
   ratios are carried by --dpx, one design pixel:
     desktop (min-width 992px): 1 dpx = container width / 1440
     mobile  (max-width 991px): 1 dpx = container width / 393
   Display type is a plain dpx multiple. Body and UI text is
   max(rem floor, dpx value) so it never drops below 0.875rem and still
   scales with zoom. The root font-size stays at the browser default.
   ========================================================================== */

:root {
  /* ---------- 1. Design pixel and grid ---------- */
  /* --vw is the container width, so a classic scrollbar never causes overflow.
     Unregistered custom properties are token streams: the cqw below resolves
     at the element that uses it, whose container is body (site.css). */
  --vw: 100cqw;
  --dpx: calc(var(--vw) / 1440);
  --cols: 8;
  --pad: calc(16 * var(--dpx));          /* page side padding, u16 */
  --gap: calc(16 * var(--dpx));          /* grid gap, u16 desktop */
  /* one grid column: (width - 2 pad - (cols-1) gap) / cols  = 162 dpx at 1440 */
  --cell: calc((var(--vw) - 2 * var(--pad) - (var(--cols) - 1) * var(--gap)) / var(--cols));
  --hair: 1px;                           /* 0.25 dpx snaps to 1 device px */

  /* spacing scale u-N = N design px (TEARDOWN A6) */
  --u2: calc(2 * var(--dpx));   --u4: calc(4 * var(--dpx));   --u6: calc(6 * var(--dpx));
  --u8: calc(8 * var(--dpx));   --u10: calc(10 * var(--dpx)); --u12: calc(12 * var(--dpx));
  --u16: calc(16 * var(--dpx)); --u20: calc(20 * var(--dpx)); --u24: calc(24 * var(--dpx));
  --u32: calc(32 * var(--dpx)); --u40: calc(40 * var(--dpx)); --u48: calc(48 * var(--dpx));
  --u56: calc(56 * var(--dpx)); --u64: calc(64 * var(--dpx)); --u72: calc(72 * var(--dpx));
  --u80: calc(80 * var(--dpx)); --u96: calc(96 * var(--dpx)); --u104: calc(104 * var(--dpx));
  --u120: calc(120 * var(--dpx)); --u128: calc(128 * var(--dpx)); --u144: calc(144 * var(--dpx));
  --u192: calc(192 * var(--dpx)); --u200: calc(200 * var(--dpx)); --u240: calc(240 * var(--dpx));

  /* ---------- 2. Type ---------- */
  --font-display: 'Archivo', 'Hind', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Archivo', 'Hind', 'Helvetica Neue', Arial, sans-serif;
  --font-np:      'Hind', 'Noto Sans Devanagari', 'Archivo', system-ui, sans-serif;
  --fw: 500;                              /* everything renders at 500 (A3) */

  /* display sizes: plain dpx multiples */
  --d1: calc(90 * var(--dpx));            /* h1, stair, count, footer stair: 6.25vw at 1440 */
  --lh-d1: 0.88;
  --ls-d1: -0.0495em;
  --d0: calc(90 * var(--dpx));            /* display wordmark; 75 dpx on mobile */
  --d2: calc(40 * var(--dpx));            /* h2, menu labels */
  --lh-d2: 0.8;
  --ls-d2: -0.036em;
  /* UI and body text: never below 0.875rem */
  --t-p1: max(0.875rem, calc(14 * var(--dpx)));
  --lh-p1: 1.0714;                        /* UI labels, tables, meta */
  --ls-p1: -0.027em;
  --lh-copy: 1.3;                         /* running copy */
  --t-sm: max(0.75rem, calc(12 * var(--dpx)));   /* captions only, never body */
  --t-input: max(1rem, calc(16 * var(--dpx)));   /* form fields: 16px floor stops iOS zoom */
  --lh-input: 1.25;
  --measure: 62ch;

  /* ---------- 3. Named layout dimensions (A6) ---------- */
  --nav-h: calc(39 * var(--dpx));
  --menu-card-w: calc(240 * var(--dpx));
  --menu-card-h1: calc(360 * var(--dpx));
  --menu-card-h2: calc(280 * var(--dpx));
  --menu-card-h3: calc(216 * var(--dpx));
  --sticky-h: calc(104 * var(--dpx));
  --social: calc(64 * var(--dpx));
  --social-gap: max(0.75rem, calc(8 * var(--dpx)));
  --dial-size: calc(462 * var(--dpx));
  --dial-item: calc(72 * var(--dpx));     /* 5rem = 5vw at 1440 */
  --dial-gap: calc(16 * var(--dpx));
  --dial-center: calc(254 * var(--dpx));
  --card-h: calc(480 * var(--dpx));
  --card-img-h: calc(332 * var(--dpx));
  --stair-step: calc(var(--cell) + var(--gap)); /* one column plus one gap: 178 dpx at 1440 */
  --hole-w: calc(4 * var(--cell) + 3 * var(--gap));   /* final window width */
  --hole-h: 60vh;

  /* ---------- 4. Z layers (A7) ---------- */
  --z-hole: 0;      --z-inner: 1;     --z-raised: 2;    --z-stage: 3;
  --z-scrollbar: 10; --z-leave: 91;   --z-enter: 90;
  --z-nav: 94;      --z-sticky: 95;   --z-grid: 95;
  --z-totem: 100;   --z-modal: 5000;  --z-cursor: 9000;
  --z-curtain: 11000; --z-preloader: 999999;

  /* ---------- 5. Motion (A8, C1 to C3) ---------- */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in:     cubic-bezier(0.5, 0, 0.75, 0);
  --ease-p2-out: cubic-bezier(0.215, 0.61, 0.355, 1);  /* power2.out */
  --ease-p2-in:  cubic-bezier(0.55, 0.085, 0.68, 0.53); /* power2.in */
  --ease-base:   cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-write:  cubic-bezier(0.333, 0, 0.667, 1);
  --ease-osmo:   cubic-bezier(0.625, 0.05, 0, 1);
  --dur-xs: 0.2s;  --dur-s: 0.4s;  --dur-m: 0.8s;  --dur-l: 1.2s;
  --stagger: 0.1s;
  --blur-reveal: 20px;                    /* div reveal start blur */
  --blur-page: 24px;                      /* page transition blur */
  --count-dur: 2s;                        /* preloader counter */
  --hairline-dur: 4s;                     /* preloader hairline */
  --tilt-persp: 1000px;
  --tilt-y: 40deg;                        /* +/- rotationY */
  --tilt-x: 25deg;                        /* +/- rotationX */
  --goo-blur: 50;                         /* stdDeviation start */
}

/* mobile layout: one breakpoint, 991 / 992 (A1) */
@media (max-width: 991px) {
  :root {
    --dpx: calc(var(--vw) / 393);
    --cols: 6;
    --gap: calc(12 * var(--dpx));
    --d1: calc(45 * var(--dpx));          /* 11.45vw */
    --lh-d1: 0.9;
    --ls-d1: -0.0524em;                   /* measured at 390 */
    --d0: calc(75 * var(--dpx));          /* 19.08vw */
    --t-p1: max(0.875rem, calc(12 * var(--dpx)));
    --lh-p1: 1.15;
    --ls-p1: -0.0086em;
    --nav-h: calc(36 * var(--dpx));
    --menu-card-w: calc(320 * var(--dpx));
    --menu-card-h1: calc(180 * var(--dpx));
    --menu-card-h2: calc(180 * var(--dpx));
    --menu-card-h3: calc(180 * var(--dpx));
    --sticky-h: calc(72 * var(--dpx));
    --dial-size: calc(361 * var(--dpx));
    --dial-item: calc(56 * var(--dpx));
    --dial-center: calc(200 * var(--dpx));
    --card-h: calc(380 * var(--dpx));
    --card-img-h: calc(200 * var(--dpx));
    --hole-w: calc(var(--vw) * 0.60305);
    --hole-h: calc(var(--vw) * 0.8346);
  }
}

/* browsers without container units fall back to the viewport */
@supports not (width: 1cqw) {
  :root { --vw: 100vw; }
}