/*
Theme Name: NOX
Theme URI: https://wearenox.io
Description: Custom child theme for NOX — an editorial / apothecary research-peptide store. Built on Blocksy. Holds the NOX design tokens, font registrations, and a light base layer. Component styles are ported page-by-page into assets/css/nox.css from the prototype.
Author: NOX
Author URI: https://wearenox.io
Template: blocksy
Version: 0.3.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nox
*/

/* ============================================================
   NOX DESIGN TOKENS
   The single source of truth for colour and type. Ported from
   the prototype (nox-split/assets/styles.css :root). Everything
   else should reference these via var(--token) — never hardcode
   a hex value in component CSS.
   ============================================================ */
:root{
  /* Surfaces — the editorial colour rhythm. Never pure white. */
  --bg:#f6f2ec;          /* primary warm cream — dominant background */
  --bg-warm:#f5f1ea;     /* hover cream / gentle shift */
  --paper:#fbf8f4;       /* secondary paper surface */
  --bg-card:#faf8f4;     /* card surface (NOT white) */
  --paper-hi:#fffcf8;    /* highest paper tone (rare) */
  --dark:#1b1a18;        /* dark section (never pure black) */
  --dark-alt:#23211e;    /* dark alternate */

  /* Ink (text) */
  --ink:#1a1a1a;         /* near-black — primary text */
  --ink-soft:#2c2c2c;
  --ink-mid:#5c5751;     /* secondary text */
  --ink-light:#726c64;   /* muted text / labels — WCAG AA on cream (≈4.6:1); darkened from #8b847a (3.3:1, H-1) */
  --ink-faint:#b8b6b1;   /* very subtle text */
  --on-dark:#f6f2ec;     /* text on dark sections */
  --on-dark-muted:rgba(246,242,236,.70); /* muted text on dark */

  /* Lines */
  --line:rgba(26,26,26,.08);        /* borders */
  --line-strong:rgba(26,26,26,.14); /* strong borders */
  --line-soft:#e8e2d8;              /* soft grid seams */
  --divider:rgba(154,133,89,.30);   /* warm bronze-grey divider */

  /* Accents — used sparingly (dividers, underlines, icons, hovers only) */
  --gold:#9a8559;        /* muted antique bronze — the accent */
  --gold-hover:#b09767;  /* lifted bronze on hover */
  --success:#5a7a4f;     /* muted sage */
  --warn:#a87a3a;        /* burnt amber */

  /* Type */
  --font-serif:'Fraunces',Georgia,serif;
  --font-sans:'Inter Tight',system-ui,-apple-system,sans-serif;
  --font-wordmark:'Italiana',Georgia,serif;

  /* ----------------------------------------------------------
     SPACING SCALE  (single modular ramp — reference everywhere)
     Replaces the old hand-tuned pixel literals. Everything from
     card padding to section rhythm now steps through this scale,
     so the whole site breathes on one grid.
     ---------------------------------------------------------- */
  --space-3xs:4px;
  --space-2xs:8px;
  --space-xs:12px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:32px;
  --space-xl:48px;
  --space-2xl:64px;
  --space-3xl:96px;
  --space-4xl:128px;
  --space-5xl:160px;

  /* Vertical rhythm for full sections — fluid, generous (Melyon-tier air). */
  --section-y:clamp(72px,10vw,150px);
  --section-y-tight:clamp(48px,6vw,88px);

  /* ----------------------------------------------------------
     CONTAINERS
     ---------------------------------------------------------- */
  --container:1200px;        /* editorial / text content */
  --container-wide:1400px;   /* wide media rows */
  --container-shop:1680px;   /* full-bleed catalogue band */
  --gutter:clamp(20px,5vw,64px); /* page side padding */

  /* ----------------------------------------------------------
     RADII  (NOX is squared-editorial — keep these minimal)
     ---------------------------------------------------------- */
  --radius-none:0;
  --radius-xs:0;              /* squared-editorial: card/box radii collapse to 0 */
  --radius-sm:0;
  --radius-pill:100px;        /* reserved for genuine pill chips (unused by cards) */
  --radius-circle:50%;        /* reserved for genuine circles (dots, icon buttons, FAB) */

  /* ----------------------------------------------------------
     SHADOWS  (soft, warm-tinted — used sparingly, never candy)
     ---------------------------------------------------------- */
  --shadow-xs:0 1px 2px rgba(26,26,26,.04);
  --shadow-sm:0 4px 16px rgba(26,26,26,.06);
  --shadow-md:0 12px 40px rgba(26,26,26,.09);
  --shadow-lg:0 30px 80px rgba(26,26,26,.14);
  --shadow-drawer:0 30px 90px rgba(0,0,0,.22);

  /* ----------------------------------------------------------
     MOTION  (two curves + one duration set for the whole site)
     --ease   : the primary slow, premium ease-out (reveals, hovers,
                image zooms, drawers). Everything gravitates here.
     --ease-io: symmetric ease for sticky bars / nav pins.
     ---------------------------------------------------------- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-lux:cubic-bezier(.22,1,.36,1); /* refined ease-out, no overshoot — card hover */
  --ease-soft:cubic-bezier(.25,.46,.45,.94); /* gentle ease-out — drawers, underlines, sticky reveals */
  --dur-fast:.2s;
  --dur:.35s;
  --dur-slow:.6s;
  --dur-xslow:.9s;

  /* ----------------------------------------------------------
     TYPE RAMP  (locked, fluid — the ONE source for every size)
     Display/headings are Fraunces; labels/body are Inter Tight.
     Sizes are set once here and referenced by name so a heading
     can never drift to five different values again.
     ---------------------------------------------------------- */
  --fs-eyebrow:0.6875rem;                    /* 11px uppercase labels */
  --fs-caption:0.75rem;                      /* 12px */
  --fs-body-sm:0.8125rem;                    /* 13px */
  --fs-body:1rem;                            /* 16px */
  --fs-body-lg:1.125rem;                     /* 18px lead paragraphs */
  --fs-h4:1.375rem;                          /* 22px */
  --fs-h3:clamp(1.375rem,2vw,1.75rem);       /* 22 → 28 */
  --fs-h2:clamp(2rem,3.4vw,3rem);            /* 32 → 48 */
  --fs-h1:clamp(2.5rem,4.6vw,4rem);          /* 40 → 64 */
  --fs-display:clamp(3rem,6vw,5.5rem);       /* section display */
  --fs-product-title:1.5rem;                 /* catalogue card name */

  /* Line-heights */
  --lh-tight:1.08;   /* display */
  --lh-snug:1.25;    /* sub-headings */
  --lh-body:1.65;    /* body copy */

  /* Letter-spacing — two sanctioned eyebrow trackings sitewide:
     --ls-eyebrow      standard labels/eyebrows (inline, panels, footers)
     --ls-eyebrow-wide ceremonial centred eyebrows above serif H2s + hero */
  --ls-eyebrow:0.22em;
  --ls-eyebrow-wide:0.32em;
  --ls-wide:0.16em;   /* buttons / CTAs */
  --ls-wordmark:0.18em;
  --ls-tight:-0.02em; /* large display */
  --ls-heading:0.12em;  /* headings & titles — airy editorial tracking (was tight/neg) */

  /* Product / editorial image ratio — one confident ratio, funnel-wide.
     5/7 is a tall Melyon-like portrait that gives the photography more
     vertical dominance; cover crops the side margin, not the vial. Push to
     2/3 once photography is shot taller still. */
  --ratio-product:5/7;
}

/* ============================================================
   BASE LAYER
   Intentionally light. The job here is only to set the
   page-level defaults so the site reads as NOX before any
   component CSS lands. Per-component styling is ported into
   assets/css/nox.css. Avoid heavy global overrides that would
   fight Blocksy's own layout.
   ============================================================ */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-serif);
  font-weight:300;
  line-height:1.1;
  letter-spacing:var(--ls-heading);
  color:var(--ink);
}

a{ color:var(--ink); }

/* The brand wordmark uses Italiana wherever it appears. Apply
   .nox-wordmark to the logo/wordmark element in the header. */
.nox-wordmark{
  font-family:var(--font-wordmark);
  letter-spacing:0.18em;
  font-weight:400;
}