/* ==========================================================================
   allGaia CVI 3.0 — design tokens (single source of truth)
   --------------------------------------------------------------------------
   Source of truth: the live site allgaia.com (repo evenra-theme, assets/evenra*.css,
   measured 2026-11-11) + the social colours fixed in "SMM post changes - final"
   (2026-11-09). Supersedes cvi-tokens.css (CVI 2.0, 2026-08-07): see the mapping
   table in index.html → "From CVI 2.0".

   HOW TO USE
   1. Link this file, then allgaia-components.css (and allgaia-social.css for posts).
   2. Put a surface class on any container: .ag-light .ag-paper .ag-white
      .ag-dark .ag-deep .ag-night .ag-photo .ag-sachet
   3. Inside, use ONLY the semantic tokens (--ag-bg, --ag-heading, --ag-text …).
      They flip automatically, so the same markup is readable on light and dark.
   Never hard-code a hex inside a component. Raw palette tokens are for surfaces.
   ========================================================================== */

/* ---------- Font: Public Sans (OFL). The site's self-hosted subset first;
   latin-ext (š ž ő ł …) and symbols load from jsDelivr only if a glyph needs them. */
@font-face{font-family:"Public Sans";src:url("../fonts/public-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0102,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:"Public Sans";src:url("../fonts/public-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0102,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:"Public Sans";src:url("https://cdn.jsdelivr.net/npm/@fontsource/public-sans@5.0.18/files/public-sans-latin-ext-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Public Sans";src:url("https://cdn.jsdelivr.net/npm/@fontsource/public-sans@5.0.18/files/public-sans-latin-ext-600-normal.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* ======================================================================
     1. RAW PALETTE — the only hex values in the system
     ====================================================================== */
  /* Light grounds */
  --ag-cream:      #FBF8F2;  /* page ground (site body) */
  --ag-paper:      #F3F3EB;  /* light card / box on cream */
  --ag-sand:       #EFE9E1;  /* tile, image placeholder */
  --ag-linen:      #E3DDD3;  /* hairlines, borders on light */
  --ag-white:      #FFFFFF;  /* white sections, inputs, posts on white */

  /* Ink & slate (text on light, dark grounds) */
  --ag-ink:        #1D4249;  /* body text on light · DARK CARD ground (lab card) */
  --ag-slate:      #4E6466;  /* headings on light · secondary text */
  --ag-graphite:   #343739;  /* buttons on light */
  --ag-anthracite: #22272A;  /* ticker band, floating buy bar */

  /* Deep teals (dark grounds) */
  --ag-tide:       #1F5962;  /* button hover · accent text on light */
  --ag-deep:       #13434F;  /* footer ground */
  --ag-abyss:      #042832;  /* social post ground · badge text */
  --ag-night:      #08141C;  /* hero floor, photo shade */

  /* Bright teals (accents on dark ONLY, never text on light) */
  --ag-sachet:     #2DB8CE;  /* the sachet colour · badge fill */
  --ag-gaia-teal:  #2AA8A8;  /* packaging master (print: C75 M0 Y0 K34 · PANTONE 2225 C) */
  --ag-signal:     #51D1EC;  /* labels, arrows, URLs on dark */
  --ag-mist:       #78C8D2;  /* big decorative numerals (at ~25% opacity) */
  --ag-aqua:       #A9E2E0;  /* eyebrows & ticks on dark photos (site hero) */
  --ag-ice:        #CEFFFF;  /* light-teal sub-lines on dark ("20 ingredients.") */
  --ag-rule:       #467884;  /* divider lines on dark */

  /* Warm accents — sparing, one per layout, never as body text */
  --ag-sun:        #C8642F;  /* vitamins card · warm marker */
  --ag-clay:       #D39A6A;  /* warm tint */
  --ag-berry:      #8B2F26;  /* plants card · tart cherry */

  /* ======================================================================
     2. TYPOGRAPHY
     ====================================================================== */
  --ag-font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ag-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* lab data only */
  --ag-w-regular: 400;   /* headings AND body: the site sets headings at 400 */
  --ag-w-strong: 600;    /* emphasis, labels, row titles, prices */
  --ag-track-head: -0.02em;   /* every heading */
  --ag-track-display: -0.025em;
  --ag-track-caps: 0.06em;    /* buttons, pills (uppercase) */
  --ag-track-eyebrow: 0.14em; /* eyebrows, ticker (uppercase) */

  /* Web scale (fluid, from the site) */
  --ag-fs-display: clamp(38px, 4.6vw, 68px);
  --ag-fs-h1: clamp(38px, 4.4vw, 64px);
  --ag-fs-h2: clamp(30px, 3.4vw, 48px);
  --ag-fs-h3: clamp(22px, 1.8vw, 32px);
  --ag-fs-lead: clamp(18px, 1.5vw, 21px);
  --ag-fs-body: 17px;
  --ag-fs-small: 15px;
  --ag-fs-micro: 13px;
  --ag-lh-head: 1.08;
  --ag-lh-body: 1.5;

  /* ======================================================================
     3. SHAPE, SPACE, DEPTH
     ====================================================================== */
  --ag-r-lg: 32px;
  --ag-r-md: 24px;   /* every card and photo box */
  --ag-r-sm: 16px;
  --ag-r-btn: 14px;  /* square-ish solid button */
  --ag-r-chip: 6px;
  --ag-r-pill: 999px;/* pills, badges, round buttons */
  --ag-gap: 24px;    /* gap between boxes (12px on phones) */
  --ag-pad-card: 48px;
  --ag-shadow-float: 0 10px 30px rgba(16,40,46,.10);
  --ag-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Gradients */
  --ag-grad-night: radial-gradient(120% 75% at 78% 100%, #2A6F78 0%, #0E3A45 42%, #042832 72%, #021A21 100%);
  --ag-grad-photo-shade: linear-gradient(0deg, rgba(8,20,28,.88) 0%, rgba(8,20,28,.55) 38%, rgba(8,20,28,0) 70%);
  --ag-grad-photo-top: linear-gradient(180deg, rgba(8,20,28,.72) 0%, rgba(8,20,28,0) 45%);
  --ag-shade-teal: rgba(12,46,52,.66); /* flat teal veil over product photos (closing card) */
}

/* ==========================================================================
   4. SURFACES — set the semantic tokens. Components read only these.
   Contrast ratios (WCAG) measured against the surface ground are in comments.
   ========================================================================== */
:root, .ag-light{ /* cream page */
  --ag-bg: var(--ag-cream);
  --ag-card: var(--ag-paper);
  --ag-heading: var(--ag-slate);      /* 5.9:1 */
  --ag-text: var(--ag-ink);           /* 10.3:1 */
  --ag-text-2: var(--ag-slate);       /* 5.9:1 — secondary text at any size */
  --ag-muted: rgba(29,66,73,.68);     /* 4.2:1 — 18px+ only, as on the site */
  --ag-accent: var(--ag-tide);        /* 7.4:1 — row labels, links, numbers */
  --ag-highlight: var(--ag-ink);      /* sub-line emphasis on light */
  --ag-line: var(--ag-linen);
  --ag-line-strong: rgba(29,66,73,.18);
  --ag-btn-bg: var(--ag-graphite);  --ag-btn-fg: var(--ag-cream);  --ag-btn-hover: var(--ag-tide);
  --ag-ghost: var(--ag-graphite);
  --ag-badge-bg: var(--ag-ink);     --ag-badge-fg: var(--ag-cream);
  --ag-chip-bg: rgba(29,66,73,.07); --ag-chip-fg: var(--ag-ink);
  --ag-icon: var(--ag-slate);
  --ag-logo: var(--ag-ink);
}
.ag-paper{ --ag-bg: var(--ag-paper); --ag-card: var(--ag-cream); }  /* heading 5.6:1 · text 9.8:1 */
.ag-white{ --ag-bg: var(--ag-white); --ag-card: var(--ag-paper); }  /* heading 6.3:1 · text 10.9:1 */
.ag-light,.ag-paper,.ag-white{
  --ag-heading: var(--ag-slate); --ag-text: var(--ag-ink); --ag-text-2: var(--ag-slate);
  --ag-muted: rgba(29,66,73,.68); --ag-accent: var(--ag-tide); --ag-highlight: var(--ag-ink);
  --ag-line: var(--ag-linen); --ag-line-strong: rgba(29,66,73,.18);
  --ag-btn-bg: var(--ag-graphite); --ag-btn-fg: var(--ag-cream); --ag-btn-hover: var(--ag-tide);
  --ag-ghost: var(--ag-graphite); --ag-badge-bg: var(--ag-ink); --ag-badge-fg: var(--ag-cream);
  --ag-chip-bg: rgba(29,66,73,.07); --ag-chip-fg: var(--ag-ink); --ag-icon: var(--ag-slate); --ag-logo: var(--ag-ink);
}
.ag-light{ --ag-bg: var(--ag-cream); --ag-card: var(--ag-paper); }

/* Dark family: same text roles on every dark ground */
.ag-dark,.ag-deep,.ag-night,.ag-photo{
  --ag-card: rgba(251,248,242,.06);
  --ag-heading: var(--ag-white);       /* 10.9:1 on ink · 15.5:1 on abyss */
  --ag-text: var(--ag-white);
  --ag-text-2: rgba(251,248,242,.78);  /* ≈6.5:1 */
  --ag-muted: rgba(251,248,242,.70);   /* 5.9:1 */
  --ag-accent: var(--ag-signal);       /* 6.1:1 on ink · 8.6:1 on abyss */
  --ag-highlight: var(--ag-ice);       /* 10.1:1 on ink · 14.3:1 on abyss */
  --ag-line: rgba(251,248,242,.16);
  --ag-line-strong: var(--ag-rule);
  --ag-btn-bg: var(--ag-cream);  --ag-btn-fg: var(--ag-graphite);  --ag-btn-hover: var(--ag-white);
  --ag-ghost: var(--ag-cream);
  --ag-badge-bg: var(--ag-sachet); --ag-badge-fg: var(--ag-abyss);  /* 6.5:1 */
  --ag-chip-bg: rgba(251,248,242,.13); --ag-chip-fg: var(--ag-cream);
  --ag-icon: var(--ag-signal);
  --ag-logo: var(--ag-white);
}
.ag-dark { --ag-bg: var(--ag-ink); }        /* lab card, dark boxes on the site */
.ag-deep { --ag-bg: var(--ag-deep); }       /* footer */
.ag-night{ --ag-bg: var(--ag-abyss); }      /* social posts; use with .ag-grad for the glow */
.ag-photo{ --ag-bg: var(--ag-night); } /* text over photos: always with a shade (.p-shade / .ag-card--photo) under it */

/* Sachet-teal ground: for a single bold card or a badge-sized block. Dark text only. */
.ag-sachet{
  --ag-bg: var(--ag-sachet); --ag-card: rgba(4,40,50,.08);
  --ag-heading: var(--ag-abyss); --ag-text: var(--ag-abyss); --ag-text-2: rgba(4,40,50,.82);
  --ag-muted: rgba(4,40,50,.75); --ag-accent: var(--ag-abyss); --ag-highlight: var(--ag-abyss);
  --ag-line: rgba(4,40,50,.22); --ag-line-strong: rgba(4,40,50,.4);
  --ag-btn-bg: var(--ag-abyss); --ag-btn-fg: var(--ag-white); --ag-btn-hover: var(--ag-ink);
  --ag-ghost: var(--ag-abyss); --ag-badge-bg: var(--ag-abyss); --ag-badge-fg: var(--ag-ice);
  --ag-chip-bg: rgba(4,40,50,.1); --ag-chip-fg: var(--ag-abyss); --ag-icon: var(--ag-abyss); --ag-logo: var(--ag-abyss);
}

/* Every surface paints its own ground and text colour */
.ag-light,.ag-paper,.ag-white,.ag-dark,.ag-deep,.ag-night,.ag-photo,.ag-sachet{background-color:var(--ag-bg);color:var(--ag-text)}
.ag-night.ag-grad{background:var(--ag-grad-night)}