/* ==========================================================================
   SEDDIR — Design tokens
   Every colour on the site comes from the client palette below.
   Breakpoints:
     mobile  ≤ 767.98px · tablet 768–1024.98px · desktop ≥ 1025px
   ========================================================================== */

:root {
  /* ---- Brand palette (client supplied, do not alter) -------------------- */
  --c-orange: #EF8900FA;
  --c-green:  #3D9B56;
  --c-yellow: #F0E600;
  --c-pink:   #EEB6D0;
  --c-red:    #E50006;
  --c-navy:   #19325E;
  --c-black:  #000000;
  --c-paper:  #F5F8F5;

  /* ---- Semantic roles ---------------------------------------------------- */
  --bg:          var(--c-paper);
  --ink:         var(--c-black);
  --ink-soft:    rgb(0 0 0 / .62);
  --link:        var(--c-navy);
  --accent:      var(--c-red);
  --ticker-bg:   var(--c-black);
  --ticker-fg:   var(--c-paper);
  --line:        rgb(0 0 0 / .12);
  --shade:       rgb(0 0 0 / .45);

  /* Header / footer pairs are set per page (see bottom of file).
     Pairs follow the client's approved logo-on-colour sheet. */
  --head-bg: var(--c-navy);
  --head-fg: var(--c-pink);
  --foot-bg: var(--c-green);
  --foot-fg: var(--c-navy);

  /* ---- Typography -------------------------------------------------------- */
  --ff-display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --ff-body:    'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wdth-wide:  112%;   /* echoes the extended SEDDIR wordmark */
  --wdth-max:   125%;   /* hero: as wide as the wordmark itself */

  /* fluid scale: one curve from phone to wide desktop, no per-breakpoint jumps */
  --fs-hero:        clamp(40px, 5.6vw + 10px, 116px);  --lh-hero: .88;
  --fs-hero-p:      clamp(16px, .45vw + 12px, 20px);   --lh-hero-p: 1.4;
  --fs-btn:         15px;
  --fs-h2:          clamp(26px, 1.6vw + 14px, 42px);
  --fs-link:        16px;
  --fs-card-name:   clamp(19px, .8vw + 12px, 26px);
  --fs-card-price:  15px;
  --fs-ticker:      11px;
  --fs-foot-tag:    clamp(24px, 2.2vw + 8px, 46px);
  --fs-foot-usp:    clamp(15px, .35vw + 12px, 19px);
  --fs-foot-contact:clamp(14px, .25vw + 11px, 17px);
  --fs-foot-legal:  clamp(12px, .15vw + 10px, 14px);
  --fs-foot-credit: clamp(12px, .15vw + 10px, 14px);
  --fs-menu:        clamp(56px, 6.2vw, 96px);

  /* ---- Layout ------------------------------------------------------------ */
  --inset:    40px;          /* outer gutter around sections (header and home hero run full-bleed) */
  --bar-h:    103px;         /* header bar height */
  --ticker-h: 27px;
  --head-total: calc(var(--bar-h) + var(--ticker-h));
  --page-top: calc(var(--head-total) + 42px);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out-circ: cubic-bezier(.075, .82, .165, 1);   /* long, soft settle */
  --ease-spring:   cubic-bezier(.22, 1, .36, 1);       /* quick start, no overshoot */
  --ease-bounce:   cubic-bezier(.34, 1.36, .64, 1);    /* small overshoot */
  --ease-io:       cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .25s;
  --dur:      .45s;
  --dur-slow: .8s;

  --z-header: 50;
  --z-overlay: 80;
  --z-drawer: 90;
  --z-intro: 100;
  --z-cursor: 120;
}

@media (max-width: 1024.98px) {
  :root {
    --inset: 16px;
    --bar-h: 80px;
    --ticker-h: 24px;
    --page-top: calc(var(--head-total) + 24px);
  }
}

@media (max-width: 767.98px) {
  :root {
    --fs-menu: 44px;
    --inset: 8px;
    --bar-h: 64px;
    --ticker-h: 22px;
    --page-top: calc(var(--head-total) + 16px);
  }
}

/* ---- Per-page colour pairs ------------------------------------------------ */
[data-page="home"]    { --head-bg: var(--c-navy);   --head-fg: var(--c-pink);   --foot-bg: var(--c-green);  --foot-fg: var(--c-navy); }
[data-page="catalog"] { --head-bg: var(--c-red);    --head-fg: var(--c-yellow); --foot-bg: var(--c-yellow); --foot-fg: var(--c-red); }
[data-page="about"]   { --head-bg: var(--c-yellow); --head-fg: var(--c-red);    --foot-bg: var(--c-navy);   --foot-fg: var(--c-pink); }
[data-page="product"] { --head-bg: var(--c-green);  --head-fg: var(--c-navy);   --foot-bg: var(--c-red);    --foot-fg: var(--c-yellow); }
[data-page="legal"]   { --head-bg: var(--c-navy);   --head-fg: var(--c-pink);   --foot-bg: var(--c-green);  --foot-fg: var(--c-navy); }