/* ==========================================================================
   SEGAFREDO — Design tokens
   Every colour, font, size and spacing value lives here.
   Shopify: these become settings in config/settings_schema.json and are
   output as CSS variables in layout/theme.liquid.
   ========================================================================== */

:root {
  /* ---- Brand colours (from segafredo.com.au) ---- */
  --color-black: #221E20;           /* logo black — text, header, "For Business" */
  --color-red: #ED1C24;             /* logo red — accents, rules, icons, large text (4.4:1 on white: large text only) */
  --color-red-strong: #D7141C;      /* red for buttons, badges, small text on white (5.2:1, AA) */
  --color-red-hover: #B80F16;
  --color-red-on-dark: #FF4D55;     /* small red text on black (5.1:1, AA) */
  --color-white: #FFFFFF;
  --color-grey-bg: #F4F4F4;         /* section backgrounds */
  --color-grey-border: #ECECEC;     /* borders */
  --color-grey-line: #D6D6D6;       /* stronger borders (inputs) */
  --color-grey-text: #5E5E5E;       /* muted text (5.9:1 on #F4F4F4) */
  --color-gold: #BF9C36;            /* optional secondary accent — use with BLACK text (6.3:1) */
  --color-success: #1E7B3C;
  --color-error: #C8102E;

  --color-text: var(--color-black);
  --color-bg: var(--color-white);
  --color-focus: #221E20;
  --color-focus-on-dark: #FFFFFF;
  --overlay-dark: linear-gradient(90deg, rgba(34,30,32,.82) 0%, rgba(34,30,32,.45) 55%, rgba(34,30,32,.15) 100%);

  /* ---- Typography ----
     Live site: Adobe Fonts kit (field-gothic-xxcondensed / field-gothic) — only works on
     approved domains, so local preview falls back to Anton / Oswald from Google Fonts. */
  --font-heading: "field-gothic-xxcondensed", "Anton", "Arial Narrow", sans-serif;
  --font-sub: "field-gothic", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  --fw-heading: 400;                /* Anton has one weight; field-gothic-xxcondensed uses 700/900 */
  --fw-sub: 300;
  --fw-body: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-heading: 0.01em;
  --ls-sub: 0.12em;

  --fs-xs: 0.75rem;                                   /* 12 */
  --fs-sm: 0.875rem;                                  /* 14 */
  --fs-base: 1rem;                                    /* 16 */
  --fs-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-h3: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  --fs-h2: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --fs-h1: clamp(2.75rem, 1.8rem + 4.2vw, 5.75rem);
  --fs-display: clamp(3.25rem, 2rem + 6vw, 8rem);     /* hero headlines */

  --lh-heading: 0.95;
  --lh-body: 1.6;

  /* ---- Spacing ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-pad: clamp(3rem, 2rem + 4vw, 6rem);
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);

  /* ---- Layout ---- */
  --page-width: 90rem;              /* 1440px */
  --page-narrow: 50rem;
  --header-height: 4.25rem;
  --announcement-height: 2.25rem;

  /* ---- Shape & depth ---- */
  --radius: 14px;                   /* global corner radius: images, buttons, inputs, cards */
  --radius-sm: 8px;                 /* small items: badges, thumbnails */
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(34, 30, 32, 0.08);
  --shadow-md: 0 10px 30px rgba(34, 30, 32, 0.12);
  --shadow-lg: 0 24px 60px rgba(34, 30, 32, 0.22);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 220ms;

  /* ---- Commerce settings (settings_schema.json) ---- */
  --free-shipping-threshold: 80;    /* informational — the value used by JS is SF.settings.freeShippingThreshold */
}

@media (min-width: 990px) {
  :root { --header-height: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}