/* Design tokens. Raw color values live in this file only. */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand, from the logo (brand/logo/vector/build.py) */
  --c-charcoal: #3F3F3F;       /* the M and the wordmark; body text 9.4:1 on paper */
  --c-ink: #2E2E2E;            /* dark bands, text on orange (5.6:1) */
  --c-orange: #F28C28;         /* the diamond: fills and buttons only, never text on light */
  --c-orange-hover: #F5A257;
  --c-orange-text: #A84C08;    /* orange for links and small text: 5.2:1 on paper */
  --c-orange-soft: #FBE3CB;    /* tinted highlight behind a selected choice */

  /* Neutrals */
  --c-paper: #F7F5F0;          /* page background */
  --c-sand: #EDEAE3;           /* alternate sections */
  --c-white: #FFFFFF;          /* cards on paper and sand */
  --c-muted: #5E5B56;          /* secondary text: 6.2:1 on paper, 5.6:1 on sand */
  --c-on-dark: #FFFFFF;
  --c-on-dark-soft: #C9C6C0;   /* secondary text on ink: 9.1:1 */
  --c-focus: #F28C28;
  --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath fill='none' stroke='%233F3F3F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M2 3l6 6 6-6'/%3E%3C/svg%3E");

  /* Lines and translucent layers */
  --c-line: rgb(63 63 63 / 0.16);
  --c-line-on-dark: rgb(255 255 255 / 0.16);

  /* Photo scrim: white hero text holds 7:1 or better over the brightest part of the shop photo */
  --scrim-hero: linear-gradient(180deg, rgb(24 24 24 / 0.84) 0%, rgb(24 24 24 / 0.78) 100%);
  --scrim-hero-lg: linear-gradient(90deg, rgb(24 24 24 / 0.9) 0%, rgb(24 24 24 / 0.8) 50%, rgb(24 24 24 / 0.3) 100%);

  /* Typography: Montserrat matches the wordmark; Public Sans for reading */
  --font-display: "Montserrat", "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-sm: 0.9375rem;
  --fs-base: 1.1875rem;
  --fs-lg: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --fs-h4: clamp(1.3125rem, 1.2rem + 0.5vw, 1.625rem);
  --fs-h3: clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);
  --fs-h2: clamp(2.375rem, 1.5rem + 3.6vw, 4.5rem);
  --fs-h1: clamp(2.125rem, 1.35rem + 3.6vw, 5rem); /* condensed 1 Oct: the hero H1 ran five lines on phones */
  --fs-page-title: clamp(2rem, 1.3rem + 3.2vw, 4.25rem);

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.65;
  --ls-display: -0.03em;
  --ls-heading: -0.015em;

  /* Spacing, 4px base */
  --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: 4.5rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  /* Shape */
  --radius-sm: 4px;   /* squared-off, shop-built: blue collar, per Nicholas 1 Oct 2026 */
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-header: 0 1px 0 rgb(63 63 63 / 0.12);
  --shadow-card-hover: 0 12px 28px rgb(46 46 46 / 0.08);
  --shadow-float: 0 18px 44px rgb(0 0 0 / 0.5);   /* sample cards over the hero photo */

  /* Sizing */
  --tap-min: 44px;
  --logo-h: 54px;
  --logo-h-lg: 72px;
  --header-h: 84px;
  --btn-w: 21rem;          /* every call to action is this wide; longer labels truncate */
  --menu-rail: 6px;        /* the mobile menu's full-height left border */
  --header-rail: 4px;      /* orange line along the foot of the header */
  --logo-hang: 20px;       /* how far the logo plate drops below the header */
  --container-max: 1440px;  /* header and sections share it, gutters included (1 Oct 2026) */
  --page-hero-h: 34rem;    /* one height for every inner-page hero */

  /* Controls: every field and button is one of two heights (Nicholas, 1 Oct 2026: "consistency with
     button sizes and fields sitewide"). Same values in site/css/tokens.css and the platform's copy. */
  --control-h: 3.5rem;          /* 56px: inputs, selects, date fields and every default button (btn-lg too) */
  --control-h-sm: 2.75rem;      /* 44px, still a full tap target: header and top-bar blocks, row actions,
                                   segmented tabs, filter bars. Nothing sits in between */
  --control-border: 2px;        /* fields and buttons alike */
  --control-border-color: var(--c-muted);
  --control-radius: var(--radius-sm);
  --control-px: var(--space-4); /* horizontal padding inside every field */
  --control-fs: max(16px, 1.0625rem);  /* field text: 16px or more, or iOS zooms the page */
  --control-label-fs: var(--fs-base);  /* the label above a field */
  --control-label-fw: var(--fw-semibold);
  --btn-fs: var(--fs-base);     /* one button label size and weight */
  --btn-fw: var(--fw-extrabold);
  --btn-icon: 1.25em;
  --choice-min-h: var(--control-h);    /* checkbox and radio tiles */
  --focus-ring: 3px solid var(--c-focus);
  --focus-offset: 2px;

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

@media (min-width: 992px) {
  :root { --header-h: 108px; }
}