/*
  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
*/

@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;

  /* Spacing scale -------------------------------------------------------- */
  --space-1: calc(0.25rem * var(--density));
  --space-2: calc(0.5rem * var(--density));
  --space-3: calc(0.75rem * var(--density));
  --space-4: calc(1rem * var(--density));
  --space-5: calc(1.5rem * var(--density));
  --space-6: calc(2rem * var(--density));
  --space-7: calc(3rem * var(--density));
  --space-8: calc(4.5rem * var(--density));

  /* Vertical rhythm (home page and section pages) ------------------------ */
  --rhythm-hero: 3.5rem;       /* below the hero */
  --rhythm-section: 3.5rem;    /* between sections */
  --rhythm-title: 1rem;        /* section title to its content */
  --card-pad: 1rem;            /* inside cards */

  /* 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-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-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-ratio: 5 / 4;     /* the picture well beside the price on wide screens */
  --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 */
  --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-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);
}

/* 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);
  }
}