/* ============================================================
   Comic Con Baltics — Merch Shop
   Design tokens (single source of truth)
   ------------------------------------------------------------
   These custom properties are the canonical values for the
   theme. theme.json (tokens/theme.json) mirrors this file for
   WordPress preset generation. Usage notes: docs/02-design-tokens.md
   ============================================================ */

:root {

  /* ---------- Color · core palette ---------- */
  --ccb-ink:     #15140f;   /* near-black. Text, solid buttons, footer bg */
  --ccb-paper:   #f4f1ea;   /* warm cream. Page background, text on ink   */
  --ccb-surface: #ffffff;   /* product tiles, form inputs                 */
  --ccb-black:   #000000;   /* hover/pressed state of ink buttons only    */

  /* Product colourways — swatches + merch photography only.
     NEVER used for UI chrome, links or emphasis. */
  --ccb-yellow:  #f2c93b;
  --ccb-mint:    #a7e6c8;

  /* ---------- Color · ink alphas (on paper) ---------- */
  --ccb-text:            var(--ccb-ink);
  --ccb-text-secondary:  rgba(21, 20, 15, 0.62);  /* body copy, nav resting */
  --ccb-text-muted:      rgba(21, 20, 15, 0.6);   /* eyebrows, captions — 0.6 = AA 4.5:1 on paper (Phase 7) */
  --ccb-text-faint:      rgba(21, 20, 15, 0.35);  /* fig. labels, indices   */

  /* ---------- Color · lines & borders ---------- */
  --ccb-hairline:       rgba(0, 0, 0, 0.12);      /* rules, tile borders    */
  --ccb-border-mid:     rgba(0, 0, 0, 0.2);       /* inputs, size buttons   */
  --ccb-border-strong:  rgba(21, 20, 15, 0.3);    /* outline buttons        */

  /* ---------- Color · on ink (footer / dark surfaces) ---------- */
  --ccb-inv-text:      #f4f1ea;
  --ccb-inv-secondary: rgba(244, 241, 234, 0.78); /* footer links           */
  --ccb-inv-muted:     rgba(244, 241, 234, 0.55); /* footer blurb           */
  --ccb-inv-faint:     rgba(244, 241, 234, 0.55); /* column titles, legal — AA on ink (Phase 7) */
  --ccb-inv-hairline:  rgba(244, 241, 234, 0.14);

  /* ---------- Color · chrome ---------- */
  --ccb-header-glass:  rgba(244, 241, 234, 0.86); /* sticky header + blur   */

  /* ---------- Typography · families ---------- */
  --ccb-font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ccb-font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- Typography · size scale ---------- */
  --ccb-fs-display: clamp(46px, 9.5vw, 104px); /* hero only                 */
  --ccb-fs-xxl:  64px;                         /* inner-page h1 (derived)   */
  --ccb-fs-xl:   clamp(30px, 4.6vw, 46px);     /* newsletter / big h2       */
  --ccb-fs-lg:   clamp(28px, 4vw, 40px);       /* section h2, product title */
  --ccb-fs-md:   clamp(26px, 3.4vw, 34px);     /* collection h2 / h3        */
  --ccb-fs-sm:   24px;                         /* price large / h4          */
  --ccb-fs-lede: 17px;                         /* intro paragraphs          */
  --ccb-fs-body: 15.5px;                       /* default body + card names */
  --ccb-fs-small: 13.5px;                      /* footer links, fine print  */
  --ccb-fs-caption: 12.5px;                    /* card subtitles, legal     */
  --ccb-fs-btn: 13px;                          /* button labels             */
  --ccb-fs-label-lg: 12.5px;                   /* nav links, tabs           */
  --ccb-fs-label: 12px;                        /* eyebrows                  */
  --ccb-fs-label-sm: 11.5px;                   /* field labels, card "Add"  */
  --ccb-fs-label-xs: 11px;                     /* badges, indices, marquee  */
  --ccb-fs-label-2xs: 10px;                    /* card tag ("New")          */

  /* ---------- Typography · line heights ---------- */
  --ccb-lh-display: 0.86;
  --ccb-lh-heading: 1.08;
  --ccb-lh-body:    1.65;
  --ccb-lh-small:   1.6;

  /* ---------- Typography · letter spacing ---------- */
  --ccb-ls-display: -0.035em;  /* hero */
  --ccb-ls-heading: -0.025em;  /* h2/h3 */
  --ccb-ls-title:   -0.02em;   /* product title */
  --ccb-ls-caps:     0.12em;   /* nav, tabs, small caps UI */
  --ccb-ls-caps-md:  0.16em;   /* buttons, indices */
  --ccb-ls-caps-lg:  0.2em;    /* badges, brand wordmark, column titles */
  --ccb-ls-caps-xl:  0.3em;    /* eyebrows, marquee strip */
  --ccb-ls-caps-2xl: 0.4em;    /* hero eyebrow only */
  --ccb-ls-size:     0.04em;   /* size buttons */

  /* ---------- Spacing scale ---------- */
  --ccb-sp-3xs: 4px;
  --ccb-sp-2xs: 8px;
  --ccb-sp-xs:  12px;
  --ccb-sp-sm:  16px;
  --ccb-sp-md:  24px;
  --ccb-sp-lg:  32px;
  --ccb-sp-xl:  40px;
  --ccb-sp-2xl: 48px;
  --ccb-sp-3xl: 56px;
  --ccb-sp-4xl: 64px;
  --ccb-sp-5xl: 72px;
  --ccb-sp-6xl: 80px;
  --ccb-sp-7xl: 96px;

  /* ---------- Layout ---------- */
  --ccb-container: 1280px;
  --ccb-gutter: var(--ccb-sp-2xl);   /* 48px desktop → 24px ≤768px (see main.css) */
  --ccb-measure-lede: 520px;         /* hero paragraph */
  --ccb-measure-body: 430px;         /* feature description */
  --ccb-measure-caption: 400px;      /* newsletter copy */
  --ccb-measure-prose: 720px;        /* inner-page content column (= theme.json contentSize) */

  /* ---------- Radii ---------- */
  --ccb-radius-sm: 2px;              /* buttons, tiles, inputs, tags */
  --ccb-radius-pill: 999px;          /* bag count badge */
  --ccb-radius-full: 50%;            /* colour swatches */

  /* ---------- Shadows / rings ----------
     Flat editorial style: NO drop shadows anywhere.
     The only "shadow" is the selected-swatch ring. */
  --ccb-ring-swatch: 0 0 0 2px var(--ccb-ink), inset 0 0 0 3px var(--ccb-paper);

  /* ---------- Motion ---------- */
  --ccb-dur-fast: 150ms;             /* buttons, hovers */
  --ccb-dur-med:  200ms;             /* swatch ring, tabs */
  --ccb-dur-slow: 450ms;             /* featured image crossfade */
  --ccb-dur-nav:  300ms;             /* mobile nav overlay */
  --ccb-ease: ease;

  /* ---------- Breakpoints (reference only — custom properties
       cannot be used inside @media; keep in sync with main.css
       and tokens/theme.json) ----------
     --ccb-bp-sm: 560px    small phones
     --ccb-bp-md: 768px    tablet portrait / mobile nav switch
     --ccb-bp-lg: 1024px   small laptop
     --ccb-bp-xl: 1280px   content max-width
  */
}