/* ==========================================================================
   TUOIL — design tokens
   Single source of truth for colour, type, rhythm and motion.
   Every other stylesheet consumes these variables and declares no raw values.
   ========================================================================== */

:root {
  /* --- Surfaces ---------------------------------------------------------- */
  --c-cream: #FCF8EE;        /* page background */
  --c-surface-2: #F3EEE0;    /* second plane: forms, quiet sections */
  --c-surface-3: #EAE3D1;    /* pressed / hovered quiet surfaces */
  --c-surface-sage: #ECEFDF; /* a quiet green plane — muted text 4.6:1 */
  --c-border: #E2DCCB;       /* hairlines on cream */
  --c-border-strong: #CFC7B1;

  /* --- Brand ------------------------------------------------------------- */
  --c-base: #2C3B1C;         /* deep olive: menu panel, CTA block, footer */
  --c-base-deep: #1F2A13;    /* one step down, for layering inside --c-base */
  --c-base-lift: #3B4E27;    /* one step up, for hover on --c-base */
  --c-base-glow: #5B7740;    /* the CTA pentagon — white on it is still 5.05:1 */

  /* --- Text -------------------------------------------------------------- */
  --c-ink: #1B2A22;          /* body text on cream          — 14.1:1 */
  --c-muted: #6E6A5C;        /* captions, meta, labels      —  5.1:1 */
  --c-on-dark: #FFFFFF;      /* text on --c-base            — 12.0:1 */
  --c-on-dark-muted: #C6CCB8;/* captions on --c-base        —  7.6:1 */

  /* --- Category accents --------------------------------------------------
     One hue per product family. Tonally level so the hexagon cluster and the
     PRODUCT LIST grid read as one family rather than four loud stickers.
     Each carries white text at 4.5:1 or better, in both rest and hover. */
  --c-oils: #96640F;         /* Essential oils    — amber   — white 5.09:1 */
  --c-oils-lift: #9D6D1D;
  --c-hydro: #3F6E62;        /* Hydrolates        — still   — white 5.80:1 */
  --c-hydro-lift: #4E7F72;
  --c-licorice: #9A5333;     /* Licorice extracts — root    — white 5.74:1 */
  --c-licorice-lift: #A9654A;
  --c-herbs: #556C20;        /* Herbs & spices    — leaf    — white 5.91:1 */
  --c-herbs-lift: #647C31;

  /* --- Hero hexagons ------------------------------------------------------
     The same four hues pitched two
     steps lighter than the accents used on cream. They live here rather than
     replacing the accents above because everything on a cream page — the
     PRODUCT LIST tiles, the category headers — still needs the darker set to
     hold white text. White on these four measures 2.7-4.0:1, below the 4.5:1
     the rest of the site keeps; they are the chosen hero colours. */
  --c-oils-hero: #C1962F;
  --c-oils-hero-lift: #CFA33C;
  --c-hydro-hero: #3F8E93;
  --c-hydro-hero-lift: #4A9CA1;
  --c-licorice-hero: #C67B55;
  --c-licorice-hero-lift: #D18A64;
  --c-herbs-hero: #5E8C4A;
  --c-herbs-hero-lift: #6B9A56;

  /* --- PRODUCT LIST hover glow --------------------------------------------
     Copied from ventos.com's PRODUCT LIST: a two-stop gradient per tile, the
     first colour at the lower left, the second at the upper right, laid over
     the photograph when the pointer arrives. Their four pairs, given to our
     families by kind: essential oils keep Ventos' own essential-oils violet,
     water goes to the hydrolates, green to the herbs, and yellow -- the colour
     of the root's cut face -- to licorice. */
  --c-oils-glow-a: #6500FF;      /* rgb(101, 0, 255) */
  --c-oils-glow-b: #FF00C8;      /* rgb(255, 0, 200) */
  --c-hydro-glow-a: #1900FF;     /* rgb(25, 0, 255) */
  --c-hydro-glow-b: #53CEEE;     /* rgb(83, 206, 238) */
  --c-licorice-glow-a: #FFDB00;  /* rgb(255, 219, 0) */
  --c-licorice-glow-b: #FDF8C4;  /* rgb(253, 248, 196) */
  --c-herbs-glow-a: #00FF29;     /* rgb(0, 255, 41) */
  --c-herbs-glow-b: #E7FFCD;     /* rgb(231, 255, 205) */

  /* Warm gold for the italic words in the hero headline — 8.4:1 on the
     scrimmed footage, so it carries display type comfortably. */
  --c-gold: #E3B368;

  /* --- Status ------------------------------------------------------------ */
  --c-error: #A32B1E;
  --c-success: #3F6E62;

  /* --- Type -------------------------------------------------------------- */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  /* Hero headline only: a high-contrast antiqua. */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* Fluid between the 1280 and 1600 design widths, then locked. */
  --fs-display: clamp(2.5rem, 1.05rem + 4.5vw, 4.5rem);   /*  40 -> 72 */
  --fs-h1: clamp(2.25rem, 1.2rem + 3.3vw, 3.5rem);        /*  36 -> 56 */
  --fs-h2: clamp(1.875rem, 1.1rem + 2.4vw, 2.75rem);      /*  30 -> 44 */
  --fs-h3: clamp(1.375rem, 1.05rem + 1vw, 1.75rem);       /*  22 -> 28 */
  --fs-h4: 1.25rem;                                        /*  20 */
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);    /*  17 -> 20 */
  --fs-body: 1.0625rem;                                    /*  17 */
  --fs-small: 0.9375rem;                                   /*  15 */
  --fs-caption: 0.8125rem;                                 /*  13 */

  --lh-display: 1.04;
  --lh-heading: 1.14;
  --lh-body: 1.6;

  --ls-display: -0.022em;
  --ls-heading: -0.014em;
  --ls-wide: 0.08em;         /* PRODUCT LIST band, tile titles */
  --ls-wider: 0.24em;        /* the wordmark only */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* --- Rhythm — 8px step ------------------------------------------------- */
  --sp-1: 0.5rem;    /*  8 */
  --sp-2: 1rem;      /* 16 */
  --sp-3: 1.5rem;    /* 24 */
  --sp-4: 2rem;      /* 32 */
  --sp-5: 3rem;      /* 48 */
  --sp-6: 4rem;      /* 64 */
  --sp-7: 5rem;      /* 80 */
  --sp-8: 7.5rem;    /* 120 */
  --sp-9: 10rem;     /* 160 */

  --section-pad: clamp(4rem, 1.5rem + 6vw, 7.5rem);  /* 64 -> 120 vertical */

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 1600px;
  --container-pad: 80px;
  --grid-cols: 12;
  --grid-gutter: 32px;

  /* --- Geometry ----------------------------------------------------------
     15deg is the system angle: hexagon lattice, diagonal photo strip,
     divider ticks and the CTA pentagon all share it. */
  --angle: 15deg;
  --angle-neg: -15deg;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* --- Motion ------------------------------------------------------------ */
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* --- Elevation ---------------------------------------------------------- */
  --shadow-soft: 0 8px 24px rgba(27, 42, 34, 0.12);
  --shadow-lift: 0 16px 36px rgba(27, 42, 34, 0.20);

  /* --- Layers ------------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-to-top: 150;
  --z-cookie: 300;
  --z-overlay: 380;
  --z-menu: 400;
  --z-header: 450;   /* the burger stays reachable above the open panel */
  --z-skip: 999;
}

@media (max-width: 1024px) {
  :root { --container-pad: 40px; --grid-gutter: 24px; }
}

@media (max-width: 480px) {
  :root { --container-pad: 20px; --grid-gutter: 16px; }
}