/* Design tokens. Source: Figma "Pixel Dandy", page 3 (Landing + Type Scale).
   Change values here; everything else references these. */
:root {
  /* colour */
  --color-bg: #E8E9E3;          /* page background (Figma 'MacBook Pro 16 - 19'); also BACKGROUND in the <dither-scroll config> in index.html */
  --color-ink: #232323;
  --color-action: var(--color-case-dark);   /* every clickable thing (buttons, toggles, pager, Explore): dark grey, the same as the landing titles at rest */
  --color-text-on-image: #fefefe;
  --color-headline: #3f3f3f;    /* headlines (never darker than the site's grey, #3f3f3f); body copy stays ink */
  --color-case-dark: #3f3f3f;   /* dark case study sections (text on it: --color-type-sample #d9d9d9) */
  --color-placeholder: #c9c9c9; /* grey stand-in for images that are not designed yet */
  --color-surface-dark: #1e1e1e;
  --color-type-sample: #d9d9d9; /* type-scale sheet only */

  /* font families */
  --font-display: "5th Avenue", "Playfair Display", Georgia, serif; /* 5th Avenue: desktop licence, used from the font installed on this Mac. Add a self-hosted @font-face once the web licence is bought. */
  --font-text: "IBM Plex Sans", system-ui, sans-serif;

  /* weights */
  --weight-thin: 100;       /* Number Stat */
  --weight-extralight: 200; /* available; no style uses it now */
  --weight-light: 300;      /* H2, H4 Light, Subtitle */
  --weight-regular: 400;    /* Body */
  --weight-medium: 500;     /* Subtitle */
  --weight-semibold: 600;   /* H4, Body Bold */
  --weight-bold: 700;       /* CTA */

  /* type scale: desktop sizes from Figma at 1728px frame; fluid below that */
  --fs-h1: clamp(2.75rem, 5.09vw, 5.5rem);      /* 88px, 5th Avenue */
  --fs-h2: clamp(2rem, 3.125vw, 3.375rem);      /* 54px, IBM Plex Sans Light / 5th Avenue */
  --fs-h3: clamp(1.125rem, 1.505vw, 1.625rem);  /* 26px, 5th Avenue (the Figma text style; the type-scale label said 25) */
  --fs-h4: 1.25rem;                              /* 20px, SemiBold / Light (also Subtitle) */
  --fs-subtitle: 1.125rem;                       /* 18px, Medium */
  --fs-body: 1rem;                               /* 16px */
  --fs-cta: 1rem;                                /* 16px, Bold */
  --fs-stat: clamp(2.5rem, 3.704vw, 4rem);       /* 64px, Thin (the Figma text style; the label there says ExtraLight 65, and the file's style wins) */

  --lh-h1: 1.0682;      /* 94 / 88 (the H1 text style in the Figma file; the type-scale label said 90) */
  --lh-h2: 1.1111;      /* 60 / 54 */
  --lh-h3: 1.2308;      /* 32 / 26 */
  --lh-h4: 1.3;         /* 26 / 20 (Subtitle too) */
  --lh-subtitle: 1.5556; /* 28 / 18 */
  --lh-body: 1.625;     /* 26 / 16 (Body Bold too) */
  --lh-normal: normal;

  /* spacing (4px base, extend as needed) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;   /* 20: gap in subtitle group */
  --space-6: 1.875rem;  /* 30: button side padding */
  --space-8: 2.5rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* soft landing: fast start, long gentle finish (used for fades and slides) */
  --section-footer: 90px;  /* empty space under the last element of every case study section, before the section line / the next section */
  --cs-row-gap: 60px;      /* vertical gap between the rows of a case study section (title, text + stats, visual nav) */
  --visual-nav-dock-top: 20px; /* where the docked nav bar's buttons start, from the top of the screen (on phones the logo sits above them, see below) */
  --visual-nav-bar-h: 78px;    /* docked nav bar on a computer: 20 + 38 button + 20 (used for the space above section titles) */
  --visual-nav-chrome-h: 78px; /* everything fixed at the top of the screen: where a section jumped to from the nav is anchored (the bar; on phones the logo too) */
  --visual-media-h: 323px;  /* height of the image under a visual button */
  --space-12: 4.5rem;   /* 72: pagination -> lock-up offset */

  /* layout */
  --gallery-image-h: 480px;  /* gallery: the fixed height of the row (Figma slide); each image scales to it and its container is as wide as the image */
  --container: 76.25rem;  /* 1220: max width of page content; the dither stage is full-bleed and ignores it */
  --hero-image-height: 500px;  /* the case study hero image container: one fixed height for every case study (computers) */
  --gutter: var(--space-5);
  --bleed-edge: max(var(--gutter), calc((100vw - var(--container)) / 2));   /* where the main container's left edge is, measured from the screen edge: scrolling rows start here and run out to the screen edge */
  --meta-height: 1.5rem;    /* height of the lock-up's client / role line; its cross-hair sits at the middle of it */
  --pager-offset: 5.75rem;  /* pager (4 slots x 18px = 72) + gap (20): where the lock-up starts, from the container edge */
  --copy-shift: 48px;       /* how far the copy (and the pager's first arrival) rises into place during a slide change */
  --intro-top: 50svh;       /* distance from the top of the screen to the top of the intro lock-up on the landing slide */
  --lockup-top: 30svh;      /* fixed distance from the top of the screen to the top of every project lock-up; the pager top aligns to it */
  --copy-width: calc(var(--container) * 0.8);  /* project copy block: 0.8 of the 1220 container = 976px (capped to the space available on narrow screens) */
}

/* Phones and tablets (<= 900px): the phone bar (57px: hamburger, logo) replaces the fixed logo: 10px gap, the buttons (38px), 20px: 125px in all. */
@media (max-width: 900px) {
  :root { --visual-nav-dock-top: 67px; --visual-nav-chrome-h: 125px; }
}
/* <= 700px: the phone bar (57px: hamburger, logo) replaces the fixed logo: 10px gap, the buttons (38px), 20px: 125px in all. */
@media (max-width: 700px) {
  :root { --visual-nav-dock-top: 67px; --visual-nav-chrome-h: 125px; }
}