/*
Theme Name: Cylocybe
Description: Cylocybe storefront theme. Self-contained and standalone: header, footer, product, archive, cart, checkout, account and fallback templates are all built in-house. No parent theme. Edit directly.
Author: Cylocybe
Version: 4.0
*/

/* ===========================================================================
 * GLOBAL DESIGN TOKENS — single source of truth.
 * style.css is enqueued on EVERY front-end page (no dependencies), so every
 * template inherits these. Do NOT redefine these in per-page CSS: change a
 * value HERE and it changes site-wide.
 *
 * Page-header geometry (--page-max / --page-gutter / --hero-top / --measure)
 * drives the eyebrow+headline+lede block on every page — category archive,
 * content pages, blog, search, guides, account, cart. Move the header once,
 * here, and every page follows.
 *
 * Notes: .card (cylocybe-card.css) keeps its own scoped copy on purpose so it
 * renders identically anywhere; the cinematic homepage keeps its inline copy;
 * account pages use a separate --cyc-* set. Everything else now inherits these.
 * ======================================================================== */
:root{
  /* Tell the browser the whole site is dark, so native controls — <select>
     dropdown popups, scrollbars, checkboxes, date pickers — render dark with
     light text instead of the system light theme (fixes white-on-white dropdowns). */
  color-scheme:dark;
  /* colour */
  --bg:#000000;            /* pure black — matches the homepage scroll overlay/scene so transitions read as one black */
  --ink:#ffffff;
  --soft:#cfc6dc;
  --mute:#aba1bd;          /* muted secondary text — kept comfortably readable (~6.5:1 on black), was #8d82a0/AA-borderline */
  --orange:#ff9a52;
  --orange-soft:rgba(255,154,82,.4);
  --pink:#ff2d8a;
  --pink-glow:rgba(255,45,138,.55);
  --cyan:#00d4ff;
  --cyan-glow:rgba(0,212,255,.45);
  --panel:rgba(20,12,30,.65);
  --hair:rgba(255,255,255,.08);
  /* type */
  --display:"Times New Roman",serif;
  --san:"Helvetica Neue",Arial,sans-serif;
  --anton:"Anton","Impact","Helvetica Neue",sans-serif;
  /* page-header / layout geometry — change the header position site-wide HERE */
  --page-max:1400px;            /* content max width (centred) */
  --page-gutter:6vw;            /* left / right gutter */
  --hero-top:calc(70px + 7vh);  /* top offset below the fixed site header */
  --measure:46rem;              /* readable text-column cap (ledes) */
  /* page-header TYPE — eyebrow + headline + lede, one definition for every hero.
     Eyebrow = the bigger/legible category style; spacing = the tight privacy style. */
  --hero-eye-size:.78rem;       /* orange eyebrow size */
  --hero-eye-track:.42em;       /* eyebrow letter-spacing */
  --hero-eye-gap:1rem;          /* eyebrow -> headline */
  --hero-h1-size:clamp(2.6rem,6vw,5.6rem);  /* headline (kept at category scale so long titles stay single-line) */
  --hero-h1-line:.95;
  --hero-h1-track:-.015em;
  --hero-h1-gap:.55rem;              /* headline -> lede: tight, matching privacy (gap comes from line-height) */
  --hero-lede-size:clamp(1.15rem,1.9vw,1.5rem);
  --hero-lede-line:1.5;
  --hero-lede-color:var(--soft);  /* whiter #cfc6dc, legible — every hero lede, no exceptions */
  /* TYPE SCALE — one ladder of sizes to stop per-section sprawl (e.g. the My
     Account page had ~20 distinct font-sizes). 5 steps + the hero display. */
  --fs-eyebrow:.72rem;  /* uppercase micro: labels, table headers, pills, meta */
  --fs-small:.85rem;    /* secondary text: hints, fine print */
  --fs-body:1rem;       /* body copy, table cells, inputs */
  --fs-lead:1.15rem;    /* lead paragraphs, emphasis, totals */
  --fs-title:1.35rem;   /* card / section / tile titles (display = --hero-h1-size) */
}

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}