/* ==========================================================================
   ONE DESIGN SYSTEM.

   KoolAllure grew four visual languages that never met: the warm-ivory
   application chrome (experience.css, --ka-*), the canonical storefront
   (storefront.css, --kas-*), the immersive homepage (immersive-store.css,
   --imm-*) and the imported research surface (research.css). An audit of the
   four found, in customer-facing controls alone:

     - 20+ distinct border-radius values for the same handful of shapes
     - ~30 distinct padding pairs across 53 control rules
     - 16 control font sizes between 0.74rem and 1.02rem, px and rem mixed
     - font-weight 500, 600 and 700 all used for "a button"
     - #b8892f written out 18 times, plus TWENTY different rgba() opacities
       of that same gold, none of them named
     - five different focus-ring colours and two widths, next to eleven
       `outline: none` declarations
     - four font-family token names for two typefaces

   None of that is visible as a bug. It is visible as a site that feels like
   several sites, which is the thing this file exists to end.

   HOW IT WORKS, AND WHY THAT MATTERS FOR REVIEW

   The legacy names are not deleted — they are REDEFINED here in terms of the
   tokens below. --kas-bg, --imm-ink and the rest keep working, so the ~1,900
   existing declarations that consume them inherit the unified values without
   being edited. That is deliberate: a pass that rewrote every rule would have
   touched the cart and checkout certified last week, and the risk of that is
   not worth the tidiness.

   New work should use the tokens in sections 1-7 and the control classes in
   controls.css. The aliases in section 8 are a bridge, not an API.

   HSL TRIPLETS, NOT HEX, for anything that needs tinting. Written as
   `38 32% 96%` and consumed as `hsl(var(--ka-background))`, so a surface can
   be tinted at a fraction of a colour — `hsl(var(--ka-primary) / 0.05)` —
   without a second variable per opacity. That one property is what makes
   twenty hand-written golds unnecessary.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------- 1. COLOUR */

  /* Warm neutral editorial ground. Never clinical white. */
  --ka-background: 38 32% 96%;
  --ka-foreground: 28 14% 13%;

  /* A slightly deeper warm surface, for bands and quiet fills. */
  --ka-secondary: 36 24% 91%;
  --ka-secondary-foreground: 28 16% 20%;
  --ka-muted: 36 22% 91%;
  --ka-muted-foreground: 30 8% 42%;

  /* Raised surfaces: cards, panels, an article's own plate. */
  --ka-card: 40 36% 98%;
  --ka-card-foreground: 28 14% 13%;

  /*
   * THE READING ACCENT — warm brown. Eyebrows, section numbers, links, and
   * the one editorial call to action per page. About 7:1 on the background.
   */
  --ka-primary: 26 48% 32%;
  --ka-primary-foreground: 40 36% 97%;

  /*
   * THE ESPRESSO — the primary button surface.
   *
   * Not the gold, and that is the single biggest colour decision in this
   * file. #b8892f on ivory measures about 2.5:1: fine as a 3px border or a
   * 40px price, unreadable behind body-sized button text, which is what it
   * was being used for. Espresso on ivory is ~13:1 and reads as restraint
   * rather than as a sale.
   */
  --ka-espresso: 28 22% 16%;
  --ka-espresso-foreground: 40 36% 97%;

  /*
   * THE COMMERCE GOLD — kept, named, and given a ramp.
   *
   * It is the brand's, and it stays on prices, the buy bar's emphasis, rating
   * stars and the boutique watermark. What ends here is writing it out by
   * hand: every tint below replaces between one and seven literal rgba()s
   * that were each rounded to a different opacity by a different person.
   */
  --ka-gold: 38 60% 45%;
  --ka-gold-deep: 40 64% 34%;
  --ka-gold-ink: 36 46% 24%;

  /* Hairlines. The visual language is built from these, not from shadows. */
  --ka-border: 32 16% 84%;
  --ka-border-strong: 30 14% 72%;

  /*
   * FOCUS IS ITS OWN COLOUR and is never the gold.
   *
   * A focus ring is the one piece of interface a keyboard user cannot do
   * without, and the audit found it drawn in five colours at two widths — one
   * of them the 2.5:1 gold. This is a single high-contrast value used
   * everywhere, at one width, over one offset.
   */
  --ka-focus: 26 48% 32%;
  --ka-focus-ring: 0 0 0 3px hsl(var(--ka-focus) / 0.35);
  --ka-focus-width: 2px;
  --ka-focus-offset: 2px;

  /* States. Warm enough to belong, distinct enough to be believed. */
  --ka-danger: 8 62% 38%;
  --ka-danger-foreground: 40 36% 97%;
  --ka-success: 152 34% 28%;
  --ka-success-foreground: 40 36% 97%;

  /* ------------------------------------------------------------ 2. TYPOGRAPHY */

  /*
   * TWO FAMILIES, AND A RULE FOR WHICH IS WHICH.
   *
   * Serif SETS things — hero lines, page and section titles, editorial card
   * titles, the italic asides. Sans SAYS things — body, every control, every
   * label, every number a customer has to act on.
   *
   * The temptation in an editorial system is to make every heading serif.
   * A 0.78rem serif chip label is harder to read at a glance than the sans
   * one it replaced, and a shopper scanning variants is glancing. So the
   * rule is by JOB, not by size.
   */
  --ka-font-display: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ka-font-body: "DM Sans", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Display scale — fluid, so it never needs a breakpoint of its own. */
  --ka-type-hero: clamp(2.75rem, 7vw, 4.5rem);
  --ka-type-h1: clamp(2.25rem, 5.5vw, 3.75rem);
  --ka-type-h2: clamp(1.75rem, 4vw, 3rem);
  --ka-type-h3: clamp(1.2rem, 2.4vw, 1.5rem);
  --ka-type-card: clamp(1.05rem, 2vw, 1.25rem);

  /* Text scale. Four sizes, and no fifth. */
  --ka-type-lede: 1.0625rem;
  --ka-type-body: 1rem;
  --ka-type-sm: 0.875rem;
  --ka-type-xs: 0.75rem;

  /*
   * Control type. ONE size for a control's label and one for a small one —
   * replacing sixteen. A button is not the place to express a size opinion.
   */
  --ka-type-control: 0.875rem;
  --ka-type-control-sm: 0.8125rem;

  /* The wide-tracked small-caps label, one definition. */
  --ka-type-label: 0.7rem;
  --ka-tracking-label: 0.2em;
  --ka-tracking-eyebrow: 0.28em;

  /*
   * Weights. 500 for controls, 600 where a label must separate from a value.
   * 700 is gone from the control system: it was doing emphasis work that
   * colour and placement already do, and it made buttons shout.
   */
  --ka-weight-body: 400;
  --ka-weight-medium: 500;
  --ka-weight-semibold: 600;

  --ka-leading-tight: 1.15;
  --ka-leading-snug: 1.35;
  --ka-leading-body: 1.65;
  --ka-leading-prose: 1.85;

  /* --------------------------------------------------------------- 3. RADIUS */

  /* Five, named by the thing they belong to rather than by size, so the
     choice at the call site is a decision about what it is. */
  --ka-radius-xs: 6px;      /* an inline tag, a swatch */
  --ka-radius-sm: 10px;     /* a field, a compact control */
  --ka-radius-md: 14px;     /* a card */
  --ka-radius-lg: 20px;     /* a panel, a dialog */
  --ka-radius-pill: 999px;  /* buttons, chips, search */

  /* ------------------------------------------- 4. CONTROL GEOMETRY (the brief) */

  /*
   * HEIGHT COMES FROM PADDING, NOT FROM A FIXED NUMBER.
   *
   * The reference asks for a control whose "height adapts naturally to
   * content". So there is no --ka-control-height here on purpose: a control
   * is padding plus its line box, which means a two-line chip grows instead
   * of clipping, and a translated label does not overflow its own button.
   *
   * min-height only guarantees the touch target, and only on coarse
   * pointers — see controls.css.
   */
  --ka-control-pad-y: 0.6875rem;   /* 11px */
  --ka-control-pad-x: 1.375rem;    /* 22px */
  --ka-control-pad-y-sm: 0.5rem;   /* 8px  */
  --ka-control-pad-x-sm: 0.875rem; /* 14px */
  --ka-control-pad-y-lg: 0.8125rem;
  --ka-control-pad-x-lg: 1.75rem;

  /* The search field's own padding: roomy on the left where the icon and the
     text live, tight on the right where the action button sits inside it. */
  --ka-field-pad-y: 0.5rem;
  --ka-field-pad-left: 1.25rem;
  --ka-field-pad-right: 0.5rem;

  --ka-tap-min: 44px;
  --ka-control-gap: 0.625rem;
  --ka-icon-sm: 16px;
  --ka-icon-md: 20px;

  /* --------------------------------------------------- 5. BORDER AND ELEVATION */

  --ka-hairline: 1px solid hsl(var(--ka-border));
  --ka-hairline-warm: 1px solid hsl(var(--ka-foreground) / 0.12);

  /*
   * THREE SHADOWS, AND MOST SURFACES USE NONE.
   *
   * The audit counted 56 box-shadow declarations, including
   * `0 12px 34px rgba(184,137,47,0.35)` under the primary button — a coloured
   * 34px glow, which is what a 2019 ecommerce theme looks like. Hierarchy
   * here is carried by surface, border and space; a shadow means "this floats
   * above the page", and only three things do.
   */
  --ka-shadow-none: none;
  --ka-shadow-raised: 0 1px 2px hsl(var(--ka-foreground) / 0.05);
  --ka-shadow-panel: 0 18px 44px hsl(var(--ka-foreground) / 0.13);
  --ka-shadow-overlay: 0 28px 70px hsl(var(--ka-foreground) / 0.22);

  /* ---------------------------------------------------------------- 6. MOTION */

  --ka-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ka-dur-fast: 0.15s;
  --ka-dur: 0.22s;
  --ka-dur-slow: 0.4s;

  /* ---------------------------------------------------------------- 7. GLASS */

  /*
   * Translucency is a hierarchy tool, not a texture. It belongs on things
   * that float OVER content — the application bar, the research submenu, a
   * field lying on a photograph — and nowhere else. A card that glasses over
   * the page behind it is harder to read for no gain.
   *
   * Every use pairs with an opaque fallback: see the @supports blocks. A
   * backdrop-filter that fails silently leaves white text on a photograph.
   */
  --ka-glass-bg: hsl(var(--ka-background) / 0.82);
  --ka-glass-bg-solid: hsl(var(--ka-background) / 0.97);
  --ka-glass-blur: blur(18px) saturate(1.15);

  /* ================================================================ 8. ALIASES

     The four legacy namespaces, redefined onto the tokens above. Existing
     rules keep their variable names and inherit the unified values; nothing
     downstream had to be edited for the palette to converge.

     Do not add to this section. It shrinks as components move to the tokens
     and control classes; it should eventually be empty.
     ------------------------------------------------------------------------ */

  /* -- experience.css (--ka-* originals) ---------------------------------- */
  --ka-bg: hsl(var(--ka-background));
  --ka-bg-elevated: hsl(var(--ka-secondary));
  --ka-surface: hsl(var(--ka-foreground) / 0.04);
  --ka-text: hsl(var(--ka-foreground));
  --ka-text-dim: hsl(var(--ka-muted-foreground));
  --ka-border-legacy: hsl(var(--ka-border));
  --ka-radius: var(--ka-radius-sm);
  --ka-font: var(--ka-font-body);

  --ka-ivory: hsl(var(--ka-background));
  --ka-ivory-glass: var(--ka-glass-bg);
  --ka-ink: hsl(var(--ka-foreground));
  --ka-ink-dim: hsl(var(--ka-muted-foreground));
  --ka-line-warm: hsl(var(--ka-foreground) / 0.12);
  --ka-shadow-warm: var(--ka-shadow-raised);

  /*
   * --ka-accent stays the GOLD, and is not re-pointed at the espresso.
   *
   * It is consumed by ~40 rules that are mostly borders, tints, stars and
   * price emphasis, where the gold is right and is the brand. What moved is
   * the primary BUTTON, which now takes --ka-espresso: see controls.css and
   * the .ka-btn family. Re-pointing this token instead would have turned
   * every gold hairline on the site into a brown one.
   */
  --ka-accent: hsl(var(--ka-gold));
  --ka-accent-deep: hsl(var(--ka-gold-deep));
  --ka-accent-ink: hsl(var(--ka-gold-ink));

  /* The named gold tints, replacing twenty hand-rounded rgba() literals. */
  --ka-gold-08: hsl(var(--ka-gold) / 0.08);
  --ka-gold-12: hsl(var(--ka-gold) / 0.12);
  --ka-gold-20: hsl(var(--ka-gold) / 0.2);
  --ka-gold-35: hsl(var(--ka-gold) / 0.35);
  --ka-gold-55: hsl(var(--ka-gold) / 0.55);

  /* -- storefront.css (--kas-*) ------------------------------------------- */
  --kas-bg: hsl(var(--ka-background));
  --kas-panel: hsl(var(--ka-card));
  --kas-ink: hsl(var(--ka-foreground));
  --kas-muted: hsl(var(--ka-muted-foreground));
  --kas-line: hsl(var(--ka-border));
  --kas-accent: hsl(var(--ka-gold));
  --kas-accent-deep: hsl(var(--ka-gold-deep));
  --kas-accent-soft: hsl(var(--ka-gold) / 0.12);
  --kas-radius: var(--ka-radius-md);
  --kas-radius-sm: var(--ka-radius-sm);
  --kas-shadow: var(--ka-shadow-raised);
  --kas-shadow-hover: var(--ka-shadow-panel);
  --kas-font-ui: var(--ka-font-body);
  --kas-font-display: var(--ka-font-display);
  --kas-ease: var(--ka-ease);

  /* -- immersive-store.css (--imm-*) --------------------------------------
     NOTE: these are OWNER-EDITABLE in wp-admin (KoolAllure → Immersive
     Store). The plugin emits an inline :root block after this stylesheet, so
     a configured palette still wins — as it must. These values are only the
     default the shop starts from, now drawn from the same source as
     everything else instead of being a fifth opinion. */
  --imm-bg: hsl(var(--ka-background));
  --imm-stone: hsl(var(--ka-secondary));
  --imm-high: hsl(var(--ka-card));
  --imm-caramel: hsl(var(--ka-primary));
  --imm-ink: hsl(var(--ka-foreground));
}