/* ==========================================================================
   Tag Custom Products — design tokens
   Phase 2, scope_mode CONTENT_SEO with the approved P2 tokens_only override:
   normalized from the archived Duda stylesheets in evidence/source-css/,
   not invented and not reverse-engineered from screenshots.

   Palette is fixed by the client: #FF0000 #FFFFFF #222222 #000000.
   Used exactly as supplied. AA compliance comes from role assignment —
   see the usage rules on --color-accent.
   ========================================================================== */

:root {
  /* ---- Color: brand (client-specified, do not alter) ------------------- */
  --color-accent:        #FF0000;  /* 3.99:1 on white — LARGE TEXT + UI ONLY */
  --color-ground:        #FFFFFF;
  --color-ink:           #222222;  /* body copy — 15.9:1 on white */
  --color-ink-strong:    #000000;  /* headings — 21:1 on white */

  /* ---- Color: neutral ramp (normalized from source greys) -------------- */
  /* source had #f7f7f7 #e1e1e1 #787878 #939393 #333 #313131 — collapsed to 5 */
  --color-neutral-50:    #F7F7F7;  /* source #f7f7f7 — section wash */
  --color-neutral-200:   #E1E1E1;  /* source #e1e1e1 — hairline borders */
  --color-neutral-400:   #939393;  /* source rgb(147,147,147) — disabled */
  --color-neutral-600:   #767676;  /* source was #787878 at 4.42:1 — FAILED AA.
                                      Darkened two points to 4.54:1. Visually identical,
                                      legally different. See docs/04-design-system.json. */
  --color-neutral-800:   #333333;  /* source rgba(51,51,51,1) — secondary copy */

  /* ---- Color: dark surfaces (client-directed dark base) ----------------- */
  /* The site runs on a near-black base. On white, the inconsistent lighting and
     colour casts in the Facebook-export photography are impossible to hide; on
     dark they recede and the product reads. Red also gains headroom here —
     #FF0000 on #0D0D0D is 4.86:1, which clears the NORMAL-text bar, where on
     white it only ever cleared the large-text bar at 4.00:1. */
  --surface-0: #0D0D0D;   /* page ground        — white on this = 19.4:1 */
  --surface-1: #161616;   /* alternating band   — white on this = 17.7:1 */
  --surface-2: #1F1F1F;   /* cards, raised      — white on this = 15.7:1 */
  --surface-3: #2A2A2A;   /* hairlines, borders */
  --on-dark:        #FFFFFF;
  --on-dark-muted:  #B9B9B9;   /* on surface-0 = 9.4:1 */
  --on-dark-faint:  #8C8C8C;   /* on surface-0 = 5.3:1 — still AA for body */

  /* ---- Color: state ---------------------------------------------------- */
  --color-focus:         #000000;  /* focus ring — black, not red; red on red fails */
  --color-error:         #B00020;  /* 7.4:1 on white; #FF0000 cannot carry error text */
  --color-success:       #0F7B3F;  /* 4.8:1 on white */

  /* ---- Color: overlay -------------------------------------------------- */
  --overlay-scrim:       rgba(0, 0, 0, 0.55); /* over hero video, for text legibility */
  --overlay-soft:        rgba(0, 0, 0, 0.25); /* source rgba(0,0,0,.25) */

  /* ---- Typography: families -------------------------------------------- */
  /* Poppins 533 elements, Source Sans Pro 19, in the source. Work Sans and
     Roboto Mono appeared on 4 elements total — Duda widget defaults, dropped. */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, sans-serif;

  /* ---- Typography: scale ----------------------------------------------- */
  /* Normalized from source px values 14 15 16 18 20 22 23 26 30 31 40 45 55 60.
     Near-duplicates collapsed: 22/23 -> 1.4375rem, 30/31 -> 1.875rem. */
  --text-xs:    0.875rem;    /* 14px — labels, captions */
  --text-sm:    1rem;        /* 16px — nav, small UI */
  --text-base:  1.125rem;    /* 18px — body. Most-used size in the source (7x) */
  --text-md:    1.25rem;     /* 20px — lead paragraph */
  --text-lg:    1.4375rem;   /* 23px — card headings */
  --text-xl:    1.875rem;    /* 30px — H3 */
  --text-2xl:   2.5rem;      /* 40px — H2 */
  --text-3xl:   3.4375rem;   /* 55px — H1 on interior pages */
  --text-display: clamp(2.5rem, 6vw, 4rem); /* hero. Source fixed 60px sits inside;
                                               top end extended to 4rem — recorded
                                               as a deliberate decision, not source */

  /* ---- Typography: weight, rhythm, tracking ---------------------------- */
  --weight-regular: 400;     /* source: 400, 500, 700 only */
  --weight-medium:  500;
  --weight-bold:    700;

  --leading-tight:  1.1;     /* display and H1 */
  --leading-snug:   1.25;    /* H2, H3 */
  --leading-normal: 1.5;     /* source line-height:1.5 */
  --leading-body:   1.6;     /* long-form copy */

  --tracking-tight:  -0.03em; /* large headings only */
  --tracking-normal: 0;
  --tracking-wide:   0.03em;  /* source letter-spacing:.03em — eyebrows, labels */

  --measure: 68ch;            /* cap long-form line length at 65–75ch */

  /* ---- Geometry -------------------------------------------------------- */
  /* Source border-radius was 0 in 18 of 28 declarations. Hard edges are the
     house style; the 25/45/50px values were Duda pill-button widgets. */
  --radius-none:  0;
  --radius-sm:    2px;       /* inputs — just enough to not look broken */
  --radius-pill:  9999px;    /* reserved: badges only. Not buttons. */

  --border-hairline: 1px;
  --border-rule:     2px;    /* source border-width 0 0 2px on inputs */
  --border-heavy:    4px;    /* accent bar under section headings */

  --stitch-dash: 6px 5px;    /* signature stitch rule — see .stitch-rule below */

  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 32px;

  --ratio-photo: 4 / 3;
  --ratio-wide:  16 / 9;

  /* ---- Layout ---------------------------------------------------------- */
  --container-max:   1200px;  /* source max-width:1200px */
  --container-wide:  1385px;  /* source max-width:1385px — full-bleed sections */
  --container-text:  760px;   /* long-form measure container */
  --gutter:          clamp(1rem, 4vw, 3rem);

  /* ---- Spacing: 4px base ----------------------------------------------- */
  /* Source used 2 5 6 8 10 12 15 16 20 30 50 70 80 130px — normalized to a
     4px scale; 15 -> 16, 30 -> 32, 50 -> 48, 70 -> 72, 130 -> 128. */
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-18: 4.5rem;    /* 72 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */

  /* Section rhythm deliberately varies — see art-direction.md. Do not apply
     one section padding value uniformly; that is the tell being avoided. */
  --section-tight:   var(--space-12);
  --section-default: var(--space-18);
  --section-loose:   var(--space-32);

  /* ---- Depth ----------------------------------------------------------- */
  /* Each level means something. Source had exactly one real shadow. */
  --shadow-raised: 0 3px 11px rgba(0, 0, 0, 0.25);  /* source value, kept */
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.30); /* modals only */

  /* ---- Motion ---------------------------------------------------------- */
  /* Source declared no transitions at all — Duda handled it in JS. These are
     new, and deliberately not one uniform 300ms ease-in-out on everything. */
  --duration-instant: 90ms;   /* colour/opacity on small UI */
  --duration-quick:   160ms;  /* buttons, links */
  --duration-settle:  280ms;  /* panels, disclosure */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1);

  /* ---- Breakpoints (documentation; media queries can't read vars) ------- */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1200px;
  --bp-2xl: 1400px;
}

/* ==========================================================================
   Signature element — the stitch rule.
   A hard-edged dashed hairline at machine-stitch proportions. The only
   ornament on the page. See art-direction.md.
   ========================================================================== */
.stitch-rule {
  border: 0;
  height: var(--border-rule);
  background-image: repeating-linear-gradient(
    to right,
    var(--color-accent) 0 6px,
    transparent 6px 11px
  );
  background-repeat: repeat-x;
}

.stitch-rule--ink {
  background-image: repeating-linear-gradient(
    to right,
    var(--color-ink-strong) 0 6px,
    transparent 6px 11px
  );
}

/* ==========================================================================
   Non-negotiable usage rules, enforced here rather than left to memory.
   ========================================================================== */

/* Red never sets small text. 3.99:1 fails AA for anything under 24px /
   18.66px bold. Large text and UI components only, where the bar is 3:1. */
.on-accent { color: var(--color-ground); }  /* white on red — large text only */

/* Focus must be visible and must not be red-on-red. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Reduced motion: the hero background video is swapped for its poster and all
   non-essential motion is removed. WCAG 2.2.2 — a 20s autoplay loop needs it. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-video { display: none; }
  .hero-poster { display: block; }
}