/*
  RipRaptor design tokens.

  Every colour, size and spacing value used by site.css comes from here.
  To change the look of the whole site, change a value in this file:

    Corner size              --radius-card, --radius, --radius-pill
    Denser or roomier pages  --density (1 is the default, 0.875 is denser)
    Brand colour             --color-brand (logo, buttons, links)
    Price colour             --color-price
    Product title size       --text-product-title
    Page width               --page-width
    Every gap on the site    --space-1 to --space-8 and the --rhythm-* tokens (a golden-ratio scale)
*/

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable-latin.de2f1fe81758.woff2") format("woff2-variations"),
       url("../fonts/archivo-variable-latin.de2f1fe81758.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Layout -------------------------------------------------------------- */
  --page-width: 70rem;           /* 1120px: wide enough for six cards, narrow enough to feel dense */
  --gutter: 1rem;
  --gutter-wide: 2rem;
  --panel-width: 30rem;          /* a card pinned to the screen corner on wide screens, such as the analytics question */
  --density: 1;

  /* Golden ratio ---------------------------------------------------------
     Spacing, rhythm and side-by-side splits all come from phi (1.618) on a 1rem base, so every gap is a step
     of one scale and each step is about 1.618 times the one before: 0.236, 0.382, 0.618, 1, 1.618, 2.618, 4.236,
     6.854rem, rounded to the nearest sixteenth of a rem. */
  --phi: 1.618;
  --golden-major: 61.8%;         /* the larger share of a golden split */
  --golden-minor: 38.2%;         /* the smaller share */
  --split-major: 1.618fr;        /* the same as grid tracks: picture beside price box, chart beside details */
  --split-minor: 1fr;

  /* Spacing scale -------------------------------------------------------- */
  --space-1: calc(0.25rem * var(--density));    /* 0.236 */
  --space-2: calc(0.375rem * var(--density));   /* 0.382 */
  --space-3: calc(0.625rem * var(--density));   /* 0.618 */
  --space-4: calc(1rem * var(--density));       /* 1 */
  --space-5: calc(1.625rem * var(--density));   /* 1.618 */
  --space-6: calc(2.625rem * var(--density));   /* 2.618 */
  --space-7: calc(4.25rem * var(--density));    /* 4.236 */
  --space-8: calc(6.875rem * var(--density));   /* 6.854 */

  /* Vertical rhythm: the same four gaps on every page --------------------- */
  --rhythm-section: var(--space-6);     /* between sections, and from the last one to the footer; a step up on wide screens */
  --rhythm-hero: var(--rhythm-section); /* below the hero: the same as every other section */
  --rhythm-title: var(--space-4);       /* a section title to its content: section gap / title gap = phi squared */
  --rhythm-page-top: var(--space-5);    /* the header to a page's first heading */
  --rhythm-control: var(--space-4);     /* between stacked controls: set pills, stock tabs, filters, the list */
  --split-gap: var(--space-6);          /* between two columns side by side */
  --card-pad: var(--space-4);           /* inside cards and tiles */

  /* Controls -------------------------------------------------------------- */
  --tap: 2.75rem;                /* the smallest a finger target gets */
  --icon-nav: 1.5rem;            /* the Swipe and Watchlist icons in the phone header */

  /* Corners -------------------------------------------------------------- */
  --radius-sm: 8px;          /* thumbnails, small controls */
  --radius: 12px;            /* buttons, inputs, images */
  --radius-card: 16px;       /* product cards and panels */
  --radius-pill: 999px;      /* filters, badges, search box */

  /* Typefaces ------------------------------------------------------------ */
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --stretch-display: 96%;
  --stretch-price: 92%;

  /* Type sizes ----------------------------------------------------------- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xs: 0.6875rem;        /* the words under the phone header icons */
  --text-section-sm: 1.25rem;   /* section titles on phones */
  --text-section: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  --text-page-title: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --text-hero: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);          /* logo on the home page */
  --text-product-title: clamp(1.375rem, 1.1rem + 1.2vw, 2.25rem);
  --text-product-title-long: clamp(1.125rem, 1rem + 0.8vw, 1.75rem);   /* names over 60 characters */
  --text-price-hero: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);             /* the cheapest price on a product page */
  --text-price-lg: clamp(2.75rem, 2.2rem + 2vw, 3.75rem);
  --text-price-card: 2rem;
  --text-price-card-sm: 1.75rem;
  --text-price-md: 1.25rem;
  --text-headline: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);   /* home page headline */

  --weight-body: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --weight-heading: 750;
  --weight-price: 800;

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-body: 1.55;

  /* Colour --------------------------------------------------------------- */
  --color-ink: #1f2430;          /* text */
  --color-ink-muted: #545b68;
  --color-ink-subtle: #667085;   /* 4.9:1 on white */
  --color-paper: #ffffff;        /* page background */
  --color-shelf: #f6f6f8;        /* image wells and quiet backgrounds */
  --color-line: #e6e8ec;
  --color-line-soft: #eef0f3;    /* dividers inside cards */
  --color-line-strong: #cfd4dc;  /* the search box */
  --color-placeholder: #c9cdd4;  /* outline drawings when there is no image */

  --color-brand: #ff5a1f;        /* logo, the raptor mark and large headings only */
  --color-brand-ink: #ffffff;
  --color-brand-action: #e5470e; /* buttons: 4:1 with white text */
  --color-brand-text: #cc4410;   /* orange words at small sizes: 4.8:1 on white */
  --color-brand-hover: #cc4410;
  --color-brand-soft: #fff1ea;   /* card borders and tints. Plain --color-brand text on it is 2.8:1, so words use --color-brand-text */
  --color-brand-line: #ffd6c4;

  --color-price: #107a32;        /* cheapest price, 5.4:1 on white */
  --color-price-soft: #e7f7ec;   /* green badges */
  --color-more: #c9271b;         /* dearer prices, red arrow */

  --color-in-stock: #107a32;
  --color-preorder: #b25e00;
  --color-out: #7a8190;

  --color-focus: #1f2430;

  /* Shadows -------------------------------------------------------------- */
  --shadow-card: 0 1px 2px rgb(31 36 48 / 0.04), 0 2px 8px rgb(31 36 48 / 0.04);
  --shadow-input: 0 1px 2px rgb(31 36 48 / 0.05);
  --shadow-search: 0 2px 6px rgb(31 36 48 / 0.06), 0 10px 30px rgb(31 36 48 / 0.08);
  --shadow-hover: 0 2px 4px rgb(31 36 48 / 0.05), 0 10px 24px rgb(31 36 48 / 0.09);
  --shadow-lift: 0 12px 32px rgb(31 36 48 / 0.14), 0 2px 6px rgb(31 36 48 / 0.06);
  --shadow-button: 0 1px 2px rgb(232 77 20 / 0.25);
  --shadow-button-hover: 0 4px 12px rgb(232 77 20 / 0.28);

  /* Motion --------------------------------------------------------------- */
  --motion-fast: 140ms;      /* presses, hovers, focus */
  --motion-normal: 220ms;    /* panels, reveals, price changes */
  --motion-slow: 340ms;      /* cards leaving the deck, entrances */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* entrances and movement */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);     /* buttons and small state changes */
  --lift: -2px;              /* hover lift for cards and rows */
  --tab-bar: 3px;            /* the line under the stock tab in view */

  /* The raptor mark (web/static/img/raptor.png, 417 x 400, drawn through a CSS mask) ------- */
  --mark-sm: 2.5rem;             /* the floor: under 40px the crest smudges, so the head is never a 1em icon */
  --mark-md: 3.5rem;             /* empty states */
  --mark-poster: clamp(13rem, 6rem + 30vw, 30rem);  /* the head on a raptor panel, cropped by its edge (raptor-lg.png) */
  --mark-poster-sm: clamp(13rem, 7rem + 18vw, 24rem); /* the same on the shorter watchlist card */
  --mark-ratio: 417 / 400;       /* the image's own proportions, width to height */

  /* Product page ---------------------------------------------------------- */
  /* On a phone the picture takes what the first screen leaves after the header, title, price and Buy now, so all four
     show together. svh is the screen with the browser's bars showing. The allowance fits a two-line name; names over
     60 characters take two more lines, and an unconfirmed delivery charge one more under the price. */
  --product-media-phone: clamp(8rem, 100vh - 32.5rem, 17rem);
  --product-media-phone-long: clamp(7rem, 100vh - 35.5rem, 15rem);
  --product-media-note: 1.25rem;
  --product-media-min: 22rem;       /* the picture well beside the price box on wide screens: at least this tall, and as tall as the box */
  --masthead-search: 2.5rem;        /* the header search box: compact, still a full finger wide */
  --masthead-logo: 1.75rem;         /* the header logo's height on phones */
  --masthead-logo-wide: 2rem;       /* the same on tablets and desktops */
  --masthead-logo-home: 2.625rem;                                  /* the home page logo on phones: the 2.618rem step, the most a 320px screen holds beside the menu */
  --masthead-logo-home-wide: 4.25rem;                              /* and on wide screens (4.236rem) */
  --buy-height: 3.75rem;            /* the Buy now button */
  --buy-mark: 3.25rem;              /* the raptor and bag inside it */
  --buy-mark-head: 2.75rem;         /* the raptor head, leaving room for the bag below its jaw */
  --buy-mark-card: 2rem;            /* the same mark on the Buy now and Pre-order buttons of cards and watchlist rows */
  --buy-mark-head-card: 1.75rem;
  --buy-bag-left: 60%;              /* the bag hangs from the jaw tip: where it sits and how big, as shares of the mark */
  --buy-bag-top: 38%;
  --buy-bag-size: 40%;
  --buy-bag-rim: 1.5px;             /* the orange gap that parts the bag from the jaw */
  --buy-bag-rim-svg: 3;             /* the same gap in the bag drawing's own units */
  --buy-arrow: 1.5rem;              /* the arrow at its right end */
  --compare-height: 3rem;           /* the outlined Compare prices button under it */
  --color-on-brand-line: rgb(255 255 255 / 0.4);   /* the divider inside the Buy now button */
  --swing: 9deg;                    /* how far the bag swings once on arrival */

  /* Raptor panels: the owner's poster style, on the home page panels and the no-results card only ---- */
  --text-poster: clamp(2.75rem, 1.5rem + 5.4vw, 5.75rem);
  --text-poster-sm: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  --stretch-poster: 70%;        /* Archivo narrowed: the condensed capitals of the owner's design */
  --weight-poster: 900;
  --leading-poster: 0.9;
  --poster-pad: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}

/* Sections sit a phi step further apart once there is room. */
@media (min-width: 48rem) {
  :root { --rhythm-section: var(--space-7); }
}

/* Browsers that know the small viewport unit measure the phone picture against the screen with its bars showing;
   others fall back to vh with a larger allowance for them. */
@supports (height: 100svh) {
  :root {
    --product-media-phone: clamp(8rem, 100svh - 29rem, 17rem);
    --product-media-phone-long: clamp(7rem, 100svh - 32rem, 15rem);
  }
}