/*
 * Design tokens — the single source of colour, type, spacing and elevation.
 * Values are copied verbatim from design_handoff_sleeptime_ecommerce/README.md.
 * This is the ONLY file allowed to contain a hex literal (see .stylelintrc.json).
 */

:root {
  /* Colour — text, surfaces, rules */
  --st-ink: #201e1d;
  --st-ink-2: #444141;
  --st-muted: #605d5d;
  --st-muted-2: #7d7979;
  --st-line: #bab6b6;
  --st-hairline: #d7d3d3;
  --st-bg: #f3f2f2;
  --st-surface: #ffffff;
  --st-surface-2: #f8f4f4;

  /* Colour — accent.
     --st-accent is NEVER a body-text colour; use --st-accent-deep for red text. */
  --st-accent: #ec3013;
  --st-accent-hover: #dd2b0f;
  --st-accent-deep: #ae1800;
  --st-accent-tint: #ffe0d9;
  --st-accent-ink: #7c1405;

  /* Colour — states */
  --st-skeleton: #eae7e7;
  --st-overlay: rgb(32 30 29 / 45%);
  --st-rule-soft: rgb(32 30 29 / 40%);
  --st-on-dark-rule: rgb(255 255 255 / 35%);
  --st-on-dark-body: #d7d3d3;

  /* Typography */
  --st-font: "Archivo", "Helvetica Neue", arial, sans-serif;
  --st-size-hero: 58px;
  --st-size-h1: 34px;
  --st-size-h1-lg: 54px;
  --st-size-h2: 30px;
  --st-size-price-lg: 42px;
  --st-size-price-card: 24px;
  --st-size-price-row: 20px; /* Cart item row price (task-2-brief.md: "20 px/800"). */
  --st-size-cart-total: 30px; /* Cart summary total (task-3-brief.md: "a 30px/900 total"). */
  --st-size-order-total: 28px; /* Checkout summary total (task-7-brief.md: "a 28px/900 total"). */
  --st-size-card-title: 16.5px;
  --st-size-body: 16.5px;
  --st-size-body-sm: 14px;
  --st-size-eyebrow: 11px;
  --st-size-label: 13px;
  --st-size-caption: 12.5px;
  --st-weight-regular: 400;
  --st-weight-medium: 500;
  --st-weight-semibold: 600;
  --st-weight-bold: 700;
  --st-weight-extrabold: 800;
  --st-weight-black: 900;
  --st-lh-hero: 0.98;
  --st-lh-tight: 1.25;
  --st-lh-body: 1.55;
  --st-lh-loose: 1.7;
  --st-track-hero: -0.035em;
  --st-track-h1: -0.03em;
  --st-track-h2: -0.02em;
  --st-track-eyebrow: 0.09em;
  --st-track-eyebrow-wide: 0.14em;
  --st-track-button: 0.05em;

  /* Layout */
  --st-container: 1360px;
  --st-gutter: 24px;
  --st-section-y: 48px;
  --st-section-y-mobile: 18px;
  --st-grid-gap: 20px;
  --st-grid-gap-mobile: 12px;

  /* Borders — radius is 0 on absolutely everything */
  --st-radius: 0;
  --st-rule: 2px solid var(--st-ink);
  --st-rule-thin: 1px solid var(--st-hairline);
  --st-rule-inner: 2px solid var(--st-rule-soft);
  --st-border-width: 2px;

  /* Elevation */
  --st-shadow-card: 0 12px 32px rgb(45 43 43 / 22%);
  --st-shadow-bar: 0 -8px 24px rgb(45 43 43 / 18%);
  --st-shadow-sheet: 0 -12px 32px rgb(45 43 43 / 22%);

  /* Control heights */
  --st-h-button: 56px;
  --st-h-button-secondary: 52px;
  --st-h-button-mobile: 52px;
  --st-h-field: 46px;
  --st-h-search: 48px;
  --st-h-touch: 44px;

  /* Motion — colour and shadow only */
  --st-transition: 150ms ease-out;

  /* Focus */
  --st-focus-width: 2px;
  --st-focus-offset: 2px;
}