/* Global design tokens — single source of truth for the store's look. */
:root {
  color-scheme: light;

  /* Colour: one monochrome family. Every surface is porcelain; actions are slate blocks; lines are charcoal tints. */
  --color-porcelain: #f7f5f2;
  --color-charcoal: #2b2f36;
  --color-slate: var(--color-charcoal);          /* primary actions: slate block, porcelain text (about 12:1) */
  --color-charcoal-muted: #5b6068;               /* secondary text (about 6:1 on porcelain) */
  --color-line: color-mix(in srgb, var(--color-charcoal) 18%, var(--color-porcelain)); /* the subtle 1px charcoal line */
  --color-divider: var(--color-line);
  --color-field: var(--color-porcelain);         /* inputs, cards and panels share the page background */
  --color-error: #8f2d2d;
  --color-ok: #2f6b4a;

  /* Typography */
  --font-sans: "Helvetica Neue", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: calc(1.0625rem * var(--text-scale, 1)); /* --text-scale, --space-scale and --content-w come from the design settings (theme.css) */
  --text-hero: clamp(2.75rem, 2rem + 5.5vw, 6.5rem);

  /* Weights: regular for body and serif display, medium for UI labels and buttons, semibold for the brand mark and emphasis */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Line heights: explicit ratios, used everywhere instead of ad-hoc numbers */
  --leading-display: 1.1;    /* large serif headings */
  --leading-heading: 1.25;   /* component titles */
  --leading-ui: 1.5;         /* labels, buttons, inputs, small print */
  --leading-body: 1.65;      /* running text */
  --leading-tight: var(--leading-display);

  --tracking-wide: 0.14em;

  /* Spacing scale (generous, 8px base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: calc(2.5rem * var(--space-scale, 1));
  --space-5: calc(4rem * var(--space-scale, 1));
  --space-6: calc(6rem * var(--space-scale, 1));
  --space-7: calc(9rem * var(--space-scale, 1));

  /*
   * Section gaps. Each one is used for the top AND the bottom padding of its section, so a section is always
   * symmetrical, and the three sizes keep the same proportion on every screen (tablet is 75 % of desktop).
   *   --hero-y     the first screen
   *   --section-y  content sections on the home page
   *   --view-y     page-like views: checkout, account, admin, confirmation, email and legal pages
   */
  --hero-y: calc(8rem * var(--space-scale, 1));
  --section-y: calc(6rem * var(--space-scale, 1));
  --view-y: calc(4rem * var(--space-scale, 1));

  /* Layout */
  --gutter: clamp(1.25rem, 0.5rem + 3.2vw, 3.5rem);
  --content-max: var(--content-w, 80rem);
  --nav-height: 4.5rem;
  --drawer-width: 26rem;

  /* Smallest comfortable touch target (buttons, links, form controls) */
  --touch: 2.75rem;

  /* Component dividers: all 1px. Hairline is the subtle charcoal tint, strong is full charcoal (buttons, key rules). */
  --border-hairline: 1px solid var(--color-line);
  --border-strong: 1px solid var(--color-charcoal);

  /* Motion: short and smooth */
  --transition: 160ms ease;
  --transition-card: 220ms ease;
}

/*
 * Scale for smaller screens. Three steps: desktop (the values above), tablet (up to 60rem) and phone (up to 40rem).
 * The large section spacings shrink the most; the small ones that make up buttons and fields stay put.
 */
@media (max-width: 60rem) {
  :root {
    --space-5: calc(3.5rem * var(--space-scale, 1));
    --space-6: calc(4.5rem * var(--space-scale, 1));
    --space-7: calc(6.5rem * var(--space-scale, 1));
    --hero-y: calc(6rem * var(--space-scale, 1));
    --section-y: calc(4.5rem * var(--space-scale, 1));
    --view-y: calc(3rem * var(--space-scale, 1));
  }
}

@media (max-width: 40rem) {
  :root {
    --text-base: calc(1rem * var(--text-scale, 1)); /* 16px: also keeps iOS from zooming into form fields */
    --text-hero: clamp(2.5rem, 1.6rem + 5.2vw, 3.25rem);
    --space-4: calc(2rem * var(--space-scale, 1));
    --space-5: calc(2.75rem * var(--space-scale, 1));
    --space-6: calc(3.75rem * var(--space-scale, 1));
    --space-7: calc(4.5rem * var(--space-scale, 1));
    --nav-height: 3.75rem;
    --hero-y: calc(4.5rem * var(--space-scale, 1));
    --section-y: calc(3.5rem * var(--space-scale, 1));
    --view-y: calc(2rem * var(--space-scale, 1));
  }
}