/*
  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;
  --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.625rem, 1.3rem + 1.4vw, 2.25rem);
  --text-price-lg: clamp(2.75rem, 2.2rem + 2vw, 3.75rem);
  --text-price-card: 2rem;
  --text-price-md: 1.25rem;
  --text-price-focal: clamp(2rem, 1.5rem + 2vw, 3rem);
  --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 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 */
  --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 */
}