/* =====================================================================
   CANNA420 — Design Tokens
   Single source of truth for color, type, shape, elevation, layout, motion.
   Every value in the design system must come from this file.
   Prefix: ts-  (avoids theme / WooCommerce CSS conflicts).
   ===================================================================== */

:root {
  /* ------------------------------------------------------------------
     Color
     Spec: primary = Dark Aquamarine Green · surface = Cute Silver ·
           ink = Refresh Black. Foreign accents are intentionally ignored.
     ------------------------------------------------------------------ */
  --ts-color-primary: #00543a;                 /* primary actions, accents, CTAs */
  --ts-color-primary-hover: #003d2b;           /* functional: pressed/hover state */
  --ts-color-on-primary: #ffffff;              /* text on primary */
  --ts-color-primary-tint: rgba(0, 84, 58, 0.10); /* tinted panels / washes */
  --ts-color-primary-tint-strong: rgba(0, 84, 58, 0.18);

  --ts-color-surface: #e3e7e8;                 /* page bg, panels, product card bg */
  --ts-color-surface-raised: #eef1f2;          /* lighter floating panel */
  --ts-color-surface-white: #ffffff;           /* raised cards / inputs */

  --ts-color-ink: #121212;                     /* text, dark cards/sections */
  --ts-color-on-ink: #ffffff;                  /* text on ink */

  --ts-color-muted: #55635e;                   /* captions / gray on surface (AA) */
  --ts-color-muted-on-ink: #a9b4b0;            /* captions on ink surfaces */
  --ts-color-muted-on-primary: rgba(255, 255, 255, 0.82);

  --ts-color-border: rgba(18, 18, 18, 0.14);   /* light outlines on light bg */
  --ts-color-border-on-dark: rgba(255, 255, 255, 0.22);

  /* Functional states required by WooCommerce notices / validation */
  --ts-color-success: #1e6b3a;
  --ts-color-warning: #8a5a00;
  --ts-color-error: #b3261e;

  --ts-color-focus: #00543a;                   /* focus ring */

  /* ------------------------------------------------------------------
     Typography
     Base "Helvetica Neue". Serif accent = "Playfair Display".
     Scale ratio 1.5 from base 16px → Body2 16 · Body1 24 ·
     Subheader 36 · Headline 54. Micro-text ~11px.
     ------------------------------------------------------------------ */
  --ts-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ts-font-serif: "Playfair Display", Georgia, serif;

  --ts-fs-base: 16px;
  --ts-fs-body2: 16px;      /* base */
  --ts-fs-body1: 24px;      /* base × 1.5 */
  --ts-fs-subheader: 36px;  /* base × 1.5² */
  --ts-fs-headline: 54px;   /* base × 1.5³ */
  --ts-fs-micro: 11px;

  --ts-fw-regular: 400;
  --ts-fw-bold: 700;

  --ts-ls-headline: -0.05em;  /* headlines / subheaders */
  --ts-ls-body: -0.02em;      /* body copy */
  --ts-ls-micro: 0.08em;      /* micro-text, chips, nav, tags, captions */

  --ts-lh-headline: 0.95;
  --ts-lh-body: 1.3;

  /* ------------------------------------------------------------------
     Shape
     Page panel 24–32px · cards 20–24px · buttons fully-rounded pills.
     ------------------------------------------------------------------ */
  --ts-radius-page: 28px;
  --ts-radius-page-sm: 24px;
  --ts-radius-card: 22px;
  --ts-radius-card-sm: 18px;
  --ts-radius-pill: 999px;
  --ts-radius-full: 50%;

  /* ------------------------------------------------------------------
     Elevation
     ------------------------------------------------------------------ */
  --ts-shadow-soft: 0 24px 60px -24px rgba(18, 18, 18, 0.25);
  --ts-shadow-card: 0 16px 40px -20px rgba(18, 18, 18, 0.18);
  --ts-shadow-pill: 0 10px 24px -12px rgba(18, 18, 18, 0.22);

  /* ------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------ */
  --ts-container: 1200px;
  --ts-container-pad: clamp(20px, 4vw, 48px);
  --ts-gutter: 24px;

  /* Breakpoints (used by media queries throughout) */
  --ts-bp-md: 640px;
  --ts-bp-lg: 1024px;

  /* ------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------ */
  --ts-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ts-dur: 0.35s;
}

/* ------------------------------------------------------------------
   Fluid display type — stays inside the 1.5 scale (16/24/36/54).
   Body copy keeps the design base (16px).
   ------------------------------------------------------------------ */
:root {
  --ts-type-headline: clamp(40px, 6.2vw, var(--ts-fs-headline));
  --ts-type-subheader: clamp(28px, 4.5vw, var(--ts-fs-subheader));
  --ts-type-body1: clamp(18px, 2.5vw, var(--ts-fs-body1));
}

/* ------------------------------------------------------------------
   Small screens — panel radius → 16px per spec.
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  :root {
    --ts-radius-page: 16px;
    --ts-radius-card: 16px;
  }
}