/*
 * Nesa Underwear design tokens.
 *
 * Mirrors theme.json so that components written in plain CSS use the same
 * variables Gutenberg uses on the editor side.
 *
 * The design is deliberately monochrome: black type on white, warm-neutral
 * surfaces borrowed from the product photography, and exactly one saturated
 * colour (--nesa-sale) reserved for OUTLET, sale prices and discount badges.
 * If something needs to stand out and it is not a discount, it stands out
 * through weight, letterspacing or whitespace — not hue.
 *
 * The `--oxa-*` names are kept as aliases so the ~28 stylesheets inherited
 * from the previous build keep resolving while they are migrated over.
 */

:root {
  /* ── Brand palette ─────────────────────────────────────────────────── */
  --nesa-ink:        #111111;  /* body copy, nav, solid buttons            */
  --nesa-ink-soft:   #6b6b6b;  /* product subtitles, meta, placeholders    */
  --nesa-line:       #e4e1dd;  /* hairlines, filter pills                  */
  --nesa-line-soft:  #edeae6;  /* unselected payment boxes                  */
  --nesa-field-line: var(--nesa-ink);  /* form field borders — matches the
                                        * selected payment box, which is the
                                        * reference for the whole form         */

  /*
   * WooCommerce's own form variables, overridden at the source.
   *
   * woocommerce.css styles every checkout field with
   *   .woocommerce form .form-row .input-text  (0,3,1)
   *   .woocommerce form .form-row select       (0,2,2)
   * which outranked our (0,3,0) / (0,2,1) rules — so the fields were drawn
   * with WooCommerce's rgba(32,7,7,0.8) border and 4px radius, not ours. That
   * is the dark border and the rounded corner.
   *
   * Redefining the variables here fixes it in one place for every form on the
   * site — checkout, cart, account — instead of out-specifying woocommerce.css
   * selector by selector. This file loads after woocommerce-general, so an
   * equal-specificity :root wins.
   */
  --wc-form-border-color:  var(--nesa-field-line);
  --wc-form-border-radius: 0;

  /* Validated fields got a green border from --wc-green: #007518. Same line as
   * at rest, so filling the form adds no colour. Invalid keeps a red, matched
   * to the required asterisk rather than WooCommerce's #a00. */
  --wc-green: var(--nesa-field-line);
  --wc-red:   #dc2626;
  --nesa-bg:         #ffffff;
  --nesa-cream:      #f7f3ef;  /* announcement bar, alternating sections   */
  --nesa-nude:       #e8d9ce;  /* accent lifted from the photography       */
  --nesa-sale:       #c8102e;  /* OUTLET, sale price, -24% badge. Only here */

  /* ── Type families ─────────────────────────────────────────────────── */
  /* One family site-wide (client brief): both tokens resolve to Inter Tight
   * so every "serif" and "sans" consumer converts without touching them. */
  --nesa-radius-btn: 6px;   /* "radius me i jap buttonave me i zbut pak" */
  --nesa-font-serif: 'Inter Tight', serif;
  --nesa-font-sans:  'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Uppercase UI text is set wide — that tracking is most of what makes the
   * design read as premium rather than as a default WooCommerce theme. */
  --nesa-track-ui:   0.12em;   /* nav, buttons, eyebrows, filter labels    */
  --nesa-track-wide: 0.2em;    /* announcement bar, small section eyebrows */

  /* ── Legacy aliases (being migrated out) ───────────────────────────── */
  --oxa-bg:         var(--nesa-bg);
  --oxa-surface:    var(--nesa-cream);
  --oxa-border:     var(--nesa-line);
  --oxa-muted:      var(--nesa-ink-soft);
  --oxa-text:       var(--nesa-ink);
  --oxa-primary:    var(--nesa-ink);
  --oxa-on-primary: #ffffff;
  --oxa-accent:     var(--nesa-ink);   /* was #3b82f6 — nothing here is blue */

  --oxa-font-sans:  var(--nesa-font-sans);
  --oxa-font-serif: var(--nesa-font-serif);
  --oxa-font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Type scale ────────────────────────────────────────────────────── */
  --oxa-fs-xs:  0.75rem;
  --oxa-fs-sm:  0.8125rem;
  --oxa-fs-md:  0.9375rem;
  --oxa-fs-lg:  1.125rem;
  --oxa-fs-xl:  1.375rem;
  --oxa-fs-2xl: 1.75rem;
  --oxa-fs-3xl: clamp(2rem, 3.5vw, 3rem);
  --oxa-fs-4xl: clamp(2.5rem, 6vw, 5rem);   /* hero headline */

  /* ── Spacing ───────────────────────────────────────────────────────── */
  --oxa-space-1: 0.5rem;
  --oxa-space-2: 0.75rem;
  --oxa-space-3: 1rem;
  --oxa-space-4: 1.5rem;
  --oxa-space-5: 2.25rem;
  --oxa-space-6: 3.5rem;
  --oxa-space-7: 5rem;
  --oxa-space-8: 7rem;

  /* ── Layout ────────────────────────────────────────────────────────── */

  /* The page gutter. Header, mega panel, hero copy and every section align to
   * this one value, so nothing on the page starts at a different left edge.
   * The design runs near-full-bleed — content sits just inside the edge, not
   * inside a centred 1280 column.
   *
   * Flat 20px, not the previous clamp(1.25rem, 3vw, 4rem). The clamp grew to
   * 64px on a wide monitor, which pulled the rail and the category grid well
   * in from the edges; 20px was already the clamp's floor, so phones are
   * unchanged and only large screens gain the width. */
  --nesa-gutter: 20px;
  /*
   * The logo asset carries its own empty margin: nesa-logo.webp is 826x404 and
   * the first inked column is 164px in, measured with GD. So the mark's optical
   * left edge sits 164/404 of its rendered height inside the image box —
   * ~23px at 56px tall — and anything aligned to the page gutter looks
   * misaligned against the logo rather than with it.
   *
   * Kept as a ratio of the logo height, so changing the height keeps the
   * alignment instead of silently breaking it.
   */
  --nesa-logo-h:     56px;
  --nesa-logo-inset: calc(var(--nesa-logo-h) * 164 / 404);
  --oxa-content-width: 768px;
  --oxa-wide-width:    1440px;  /* the grid runs near-full-bleed, not 1200 */

  /* Square by design. Kept as variables so the inherited stylesheets that
   * reference them flatten out too, rather than each needing an edit. */
  --oxa-radius:    0;
  --oxa-radius-sm: 0;
  --oxa-radius-lg: 0;

  /* ── Motion ────────────────────────────────────────────────────────── */
  --oxa-ease: cubic-bezier(.2, .8, .2, 1);
  --oxa-dur:  180ms;
  --nesa-dur-slow: 450ms;   /* product-card image crossfade, size-row reveal */
}

/*
 * No prefers-color-scheme block, deliberately.
 *
 * The previous build flipped to a dark palette on the visitor's OS setting.
 * For a lingerie catalogue that inverts the product photography's surround
 * and wrecks the colour reading of nude/skin tones, so the palette above is
 * the only one. Do not reintroduce a dark variant without a design decision.
 */

@media (prefers-reduced-motion: reduce) {
  :root { --oxa-dur: 0ms; --nesa-dur-slow: 0ms; }
}