/* ==========================================================================
   tokens.css — every design value lives here. All values are provisional.
   From the design reference (design_site/css/tokens.css), with HQ's changes
   marked "Chunk 17".
   Tier 1 (primitives): raw values. Only this file references them.
   Tier 2 (roles): what a value is for. Components use roles only.
   ========================================================================== */

:root {
  /* --- Primitives: colour ------------------------------------------------ */
  --warm-white: #FAF8F5;
  --stone-100: #EFEBE6;
  --stone-300: #D9D3CC;
  --stone-600: #6B625B;
  --espresso-900: #1C1714;
  --bottle-green: #1F4D3A;
  --signal-red: #A12A1F;
  --espresso-900-a40: rgb(28 23 20 / 0.4);
  --espresso-900-a30: rgb(28 23 20 / 0.3);
  --espresso-900-a55: rgb(28 23 20 / 0.55);

  /* --- Primitives: font families ----------------------------------------- */
  --family-archivo-expanded: "Archivo Expanded", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --family-archivo: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --family-ng-mono: "NG Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* --- Primitives: sizes (rem, 1rem = 16px) ------------------------------ */
  --px-1: 0.0625rem;
  --px-2: 0.125rem;
  --px-4: 0.25rem;
  --px-6: 0.375rem;
  --px-8: 0.5rem;
  --px-12: 0.75rem;
  --px-14: 0.875rem;
  --px-15: 0.9375rem;
  --px-16: 1rem;
  --px-20: 1.25rem;
  --px-24: 1.5rem;
  --px-32: 2rem;
  --px-44: 2.75rem;
  --px-48: 3rem;
  --px-56: 3.5rem;
  --px-64: 4rem;
  --px-80: 5rem;
  --px-96: 6rem;
  --px-392: 24.5rem;
  --px-480: 30rem;
  --px-1200: 75rem;

  /* --- Primitives: motion ------------------------------------------------ */
  --duration-150: 150ms;
  --duration-250: 250ms;
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Roles: colour ----------------------------------------------------- */
  --color-canvas: var(--warm-white);
  --color-surface-alt: var(--stone-100);
  --color-ink: var(--espresso-900);
  --color-ink-muted: var(--stone-600);
  --color-line: var(--stone-300);
  --color-accent: var(--bottle-green);       /* one job: "new this week" marker */
  --color-error: var(--signal-red);          /* errors only */
  --color-focus: var(--espresso-900);
  --color-on-ink: var(--warm-white);         /* text on an ink fill */
  --color-on-ink-muted: var(--stone-300);    /* secondary text on the dark band (ink-muted fails there) */
  --color-on-accent: var(--warm-white);      /* text on the accent marker */
  /* Interactive boundaries (inputs, outline buttons, size boxes) need 3:1
     against the canvas, so they never use --color-line. */
  --color-control-edge: var(--stone-600);
  --color-control-edge-active: var(--espresso-900);
  --color-line-on-ink: var(--stone-600);     /* decorative rules on the dark band */
  --color-scrim: var(--espresso-900-a40);    /* behind dialogs */
  /* Campaign photos that carry a title (home, 18 October 2026): a flat
     shade over the whole photo so light text stays readable on any
     picture. Never on product photos. */
  --color-media-shade: var(--espresso-900-a30);
  --color-media-shade-hover: var(--espresso-900-a55);  /* outline button hover on a photo */
  --color-on-media: var(--warm-white);       /* text and button edges on a shaded photo */
  --color-placeholder: var(--stone-300);     /* image-slot tone */
  --color-placeholder-label: var(--espresso-900);
  --color-disabled-ink: var(--stone-600);
  --color-disabled-surface: var(--stone-100);

  /* Size states: marks carry the meaning, colour only supports it.
     available = ink outline; few-left = ink outline + small dot;
     sold-out = muted, struck through; ask = dashed outline + "?";
     selected = filled ink. */
  --color-size-available: var(--espresso-900);
  --color-size-few-left: var(--espresso-900);
  --color-size-sold-out: var(--stone-600);
  --color-size-ask: var(--espresso-900);

  /* --- Roles: type ------------------------------------------------------- */
  --font-display: var(--family-archivo-expanded);
  --font-reading: var(--family-archivo);
  --font-mono: var(--family-ng-mono);

  /* label — mono 12px, uppercase (nav, buttons, eyebrows, badges, legends).
     The only uppercase in the system besides the wordmark. */
  --type-label-size: var(--px-12);
  --type-label-weight: 500;
  --type-label-line-height: 1.35;
  --type-label-tracking: 0.08em;

  /* mono body — prices, sizes, codes */
  --type-mono-size: var(--px-14);
  --type-mono-weight: 400;
  --type-mono-line-height: 1.5;
  --type-mono-tracking: 0;

  /* reading body — paragraphs */
  --type-body-size: var(--px-16);
  --type-body-weight: 400;
  --type-body-line-height: 1.6;
  --type-body-tracking: 0;
  --type-strong-family: var(--family-ng-mono);
  --type-strong-weight: 500;
  --type-strong-size: 0.9375em;

  /* Display, heading and heading-s are sentence case. Wide tracking suits
     capitals, not lowercase: keep 0.01–0.02em, tighter as the size grows. */

  /* heading-s — 20px */
  --type-heading-s-size: var(--px-20);
  --type-heading-s-weight: 700;
  --type-heading-s-line-height: 1.25;
  --type-heading-s-tracking: 0.02em;

  /* heading — 28px at 360 → 40px at 1200 */
  --type-heading-size: clamp(1.75rem, 1.4286rem + 1.4286vw, 2.5rem);
  --type-heading-weight: 700;
  --type-heading-line-height: 1.15;
  --type-heading-tracking: 0.015em;

  /* display — 36px at 360 → 60px at 1200; line-height ≥ 1.1 for É Ç İ Ş Ğ */
  --type-display-size: clamp(2.25rem, 1.6071rem + 2.8571vw, 3.75rem);
  --type-display-weight: 700;
  --type-display-line-height: 1.1;
  --type-display-tracking: 0.01em;

  /* wordmark — "NG Boutique" set in type: the footer, the 500 page and
     the share card. The header and the coming-soon page show the logo
     (storefront/logos/, sizes under "Logo" below). Uppercase via CSS,
     wide tracking: the one uppercase use of the expanded face. */
  --type-wordmark-family: var(--family-archivo-expanded);
  --type-wordmark-weight: 700;
  --type-wordmark-line-height: 1.1;
  --type-wordmark-tracking: 0.12em;
  --type-wordmark-display-size: clamp(1.75rem, 8.5vw, 6.5rem); /* footer, fills the width */

  /* name — product names in cards, looks, worn with and the selection.
     Language in the reading face, data in mono. */
  --type-name-family: var(--family-archivo);
  --type-name-size: var(--px-15);
  --type-name-weight: 400;
  --type-name-line-height: 1.4;

  /* NG Mono glyph width (monospace, 600/1000 em). Used to line up centred
     tap targets with the text edge. */
  --type-mono-advance: 0.6em;

  /* price — mono 500; large on the product page */
  --type-price-weight: 500;
  --type-price-large-size: var(--px-20);
  --type-price-display-size: var(--px-64);      /* link preview */

  /* --- Roles: spacing (4px base) ----------------------------------------- */
  --space-2xs: var(--px-4);
  --space-xs: var(--px-8);
  --space-s: var(--px-12);
  --space-m: var(--px-16);
  --space-l: var(--px-24);
  --space-xl: var(--px-32);
  --space-2xl: var(--px-48);
  --space-3xl: var(--px-64);
  --space-4xl: var(--px-96);

  /* --- Roles: layout ----------------------------------------------------- */
  --layout-max-width: var(--px-1200);
  --layout-gutter: var(--px-16);
  --space-section: var(--px-64);              /* 96px from 768px */
  --header-height: var(--px-56);
  --announcement-height: var(--px-32);       /* the thin bar above the header (home) */
  --tap-min: var(--px-44);                    /* smallest tap target */

  /* Logo — drawn in the text colour; height in the header, width elsewhere. */
  --logo-header-height: var(--px-32);
  --logo-header-height-wide: var(--px-44);    /* from 1200px */
  --logo-display-width: min(100%, var(--px-392)); /* coming soon */
  --control-height: var(--px-48);             /* buttons, inputs, size boxes */
  --grid-columns: 2;                          /* product grid: 3 from 768px, 4 from 1200px */
  --grid-gap-column: var(--px-16);
  --grid-gap-row: var(--px-32);
  --icon-size: var(--px-20);
  --thumb-width: var(--px-80);                /* small product image in compact cards */
  --floating-size: var(--px-56);              /* room kept for the sticky product bar */
  --turnstile-width: 18.75rem;                /* 300 × 65px, fixed by Cloudflare */
  --turnstile-height: 4.0625rem;
  --preview-width: var(--px-1200);            /* link preview image: 1200 × 630 */
  --preview-height: 39.375rem;
  --panel-width: var(--px-480);               /* side panel from 768px */
  --panel-height: 100dvh;                     /* full-height dialogs: the page behind is locked, so dvh can't make anything jump */
  --panel-sheet-max-height: 88svh;            /* bottom sheet; svh so it doesn't resize with the address bar */
  --card-min-width: 9rem;                     /* radio cards: two side by side from about 320px */
  --screen-min-height: 100svh;                /* back office column fills the screen */
  --marker-dot: var(--px-6);                  /* "few left" dot on a size box */
  --measure-reading: 38rem;                   /* longest comfortable line of reading text */
  /* Hero media, full bleed at every size; text always below it.
     Phones: vertical footage, height = the smaller of 4:5 (width × 1.25) and the
     screen height left after the header and the text.
     From 768px: a horizontal band, height = the smaller of 16:9 (width × 0.5625)
     and the screen height left after the header and the text.
     Footage is cropped to fit (cover, centred), never shrunk. */
  /* Full-screen campaign blocks (home: the opening and the band): the
     screen left under the header and the announcement bar. */
  --campaign-screen-height: calc(100svh - var(--header-height) - var(--announcement-height));

  /* --- Roles: layers ----------------------------------------------------- */
  --layer-raised: 1;                          /* badges and buttons over images */
  --layer-sticky: 10;                         /* sticky header */
  --layer-floating: 20;                       /* sticky product bar, BO action bar */

  /* --- Roles: lines, focus, radius --------------------------------------- */
  --rule-width: var(--px-1);
  --link-underline-offset: 0.2em;
  --radius: 0;
  --focus-width: var(--px-2);
  --focus-offset: var(--px-2);
  --focus-ring: var(--focus-width) solid var(--color-focus);
  --focus-ring-on-ink: var(--focus-width) solid var(--color-on-ink);  /* on the dark band */
  --notice-rule-width: var(--px-2);

  /* --- Roles: aspect ratios ---------------------------------------------- */
  --ratio-product: 3 / 4;        /* cards, gallery, looks: 70% of the shop's photos (Chunk 17) */
  --ratio-hero: 4 / 5;           /* hero on phones (the maximum): vertical footage */
  --ratio-hero-wide: 16 / 9;     /* hero from 768px (the maximum): horizontal footage */
  --ratio-category: 3 / 4;       /* category tiles */
  --ratio-banner: 16 / 9;        /* banners, shop photos */
  --ratio-campaign: 4 / 5;       /* campaign halves and stories (home) */
  --ratio-preview: 1200 / 630;   /* link preview image */
  --ratio-square: 1 / 1;         /* measuring diagrams, link-preview product image */

  /* --- Roles: motion ----------------------------------------------------- */
  --motion-fast: var(--duration-150);
  --motion-base: var(--duration-250);
  --motion-ease: var(--ease-out-quint);
  /* Scroll reveal (Pinhas, 29 October 2026): how far a block rises and how
     much a campaign photo settles while it scrolls into view. */
  --reveal-distance: var(--px-32);
  --reveal-photo-scale: 1.08;
  /* Heavy scrolling (Pinhas, 29 October 2026): the share of the way left
     that the page glides each frame after a mouse-wheel turn (site.js).
     Smaller is heavier: 1 would be the browser's own scroll. */
  --scroll-glide: 0.06;
}

@media (min-width: 48em) {
  :root {
    --layout-gutter: var(--px-24);
    --space-section: var(--px-96);
    --grid-columns: 3;
  }
}

@media (min-width: 75em) {
  :root {
    --grid-columns: 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}