/* Mylarlabs site tokens.
   T0/T1 started from the approved homepage preview. Issue #2 (2026-10-08) moved the art direction to the
   mockups in Photos/ (see docs/design-spec.md): brighter decorative red, warmer paper, hand-lettered notes.
   Revision 2 (owner review of PR #4): buttons use the same bright red as the art. #fc432c with white is 3.51:1,
   which passes WCAG 2.x AA only for large text (>= 18.66px bold / 24px regular), so every white label on
   --action is set at --action-text (19px) bold or larger. Small red text on paper uses --red-text (4.9:1). */
:root {
  /* Surfaces and text */
  --paper: #fbf8ef;              /* page background, dialog, sticker paper */
  --ink: #181818;                /* text, borders, dark sticker and toast backgrounds */
  --ink-soft: #2b2e45;           /* issue #7: secondary text (meta, breadcrumb, SKU, form notes); near-black navy like the mockups, 12.6:1 on paper */
  --muted: #5c554e;              /* demo note only: the one line that should recede (6.9:1 on paper) */
  --line-soft: #b7b3aa;          /* benefit dividers, mobile footer rule */
  --card-border: #d3d0c8;        /* product card */

  /* Reds, by purpose (kept distinct on purpose) */
  --paint: #fc432c;              /* decorative red: paint swipes, rays, red stickers without white text */
  --action: #fc432c;             /* buttons, Quote List, step numbers, floating contact: white text >= --action-text bold */
  --action-hover: #e8361f;       /* hover state for --action surfaces (4.22:1 with white) */
  --action-text: 19px;           /* minimum size of bold white text on --action (AA large text: 18.66px bold) */
  --red-text: #c93620;           /* red text at body sizes on paper (4.9:1): eyebrows, current links */
  --accent-heading: var(--paint);/* emphasised word in section headings (large display text) */
  --accent-hero: var(--paint);   /* hero title second line (black outline carries the contrast) */
  --error: #a32716;              /* quantity validation text */

  /* Hero title outline */
  --title-stroke: #0b0b0b;

  /* Focus ring */
  --focus: #5b36c9;

  /* Type families. Barlow is hosted at 400/500/600/700/800 (fonts.css); Lilita One and Caveat Brush at 400 only. */
  --display: 'Lilita One', sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
  --hand: 'Caveat Brush', 'Lilita One', cursive; /* sticker notes and hand-lettered asides only */

  /* Type scale (issue #7). Desktop values here, phone values (<=760px) below. home.css sizes text only
     through these tokens; roles and weights are listed in its "Type scale" block. */
  --type-display: clamp(48px, 5.6vw, 84px); /* Lilita 400: static h1 (product, About); art headings use --ah-size */
  --type-h2: 44px;               /* Lilita 400, no tracking: About/product h2, Quote List title, homepage lead line */
  --type-h3: 24px;               /* Barlow 800: step, benefit and custom-card titles, FAQ questions */
  --type-title: 22px;            /* Barlow 800, no tracking: product card titles (home and /shop/) */
  --type-body-lg: 24px;          /* Barlow 500: hero subtitle, /shop/ intro, About lede */
  --type-body: 18px;             /* Barlow 500, --ink: paragraphs, answers, step/benefit text, footer, dialogs */
  --type-small: 16px;            /* Barlow 500 (meta 600), --ink-soft: meta, breadcrumb, notes, SKU, eyebrows */
  --type-label: 18px;            /* Barlow 700: nav, footer links, result count, stepper value, back link */
  --type-label-form: 16px;       /* Barlow 700: form field labels */
  --type-button: var(--action-text); /* Barlow 700: every button (white on --action needs >= 18.66px bold) */
  --type-button-lg: 22px;        /* Barlow 700: hero and lead CTAs */
  --type-button-xl: 28px;        /* Barlow 700: the one oversized "Get a Quote" toggle (owner request, PR #4 r2) */
  --type-hand: 24px;             /* Caveat Brush 400: sticker notes */
  --type-hand-lg: 30px;          /* Caveat Brush 400: large hand-lettered asides */

  /* Lines and stickers */
  --rule: 2px;                   /* header / footer / card outlines */
  --sticker-shadow: 3px 3px 0 var(--ink);

  /* Layout */
  --container: 1440px;
  --gutter: clamp(48px, 5vw, 72px); /* page side gutter for every .wrap: 72px at 1440, 64px at 1280 (owner review 3) */
}

@media (max-width: 1100px) {
  :root {
    --gutter: 40px;
  }
}

@media (max-width: 760px) {
  :root {
    --gutter: clamp(24px, calc(26.667vw - 72px), 32px); /* 32px at 390 easing to 24px at 360 */
    --type-display: 48px;
    --type-h2: 32px;
    --type-h3: 20px;
    --type-title: 18px;
    --type-body-lg: 19px;
    --type-body: 17px;
    --type-small: 15px;
    --type-label: 17px;
    --type-button-lg: var(--action-text);
    --type-button-xl: 24px;
    --type-hand: 19px;
    --type-hand-lg: 24px;
  }
}

@media (max-width: 360px) {
  :root {
    --type-display: 46px;
  }
}