/* =========================================================================
 * AurumPress Design Tokens — single source of visual truth.
 *
 * Three-tier architecture (Design Tokens Community Group convention):
 *   1. GLOBAL   --gold-50..900, --neutral-0..950, --success/warning/
 *                danger/info-*  — raw values, never used directly in
 *                components, never redefined per theme/mode.
 *   2. ALIAS    --color-text-*, --color-surface-*, --color-border-*, ...
 *                — semantic names components actually consume. These are
 *                the ones that flip between light/dark mode.
 *   3. COMPONENT (lives in style.css / block CSS) — e.g. --aur-btn-bg —
 *                only ever set to an alias token, never to a global or
 *                raw value. None currently need overriding per-instance,
 *                so no component-tier custom properties exist yet; add
 *                them only when a component needs a local override.
 *
 * Rule: nothing outside this file may contain a raw HEX/rgb() color, a
 * bare px spacing/radius/shadow value, or a hardcoded font stack. Every
 * value used elsewhere is `var(--token-name)`.
 *
 * Loaded before style.css (see functions.php) so every legacy --ink-soft /
 * --gold / etc. name it already relies on is defined exactly once, here,
 * as an alias onto the tokens below — zero rewrite risk for existing
 * component CSS, zero duplicate definitions.
 * ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
   * 1. GLOBAL TOKENS — raw palette. Do not use in components directly.
   * --------------------------------------------------------------------- */

  /* Gold (primary brand hue) ramp. 500 is the site's signature gold;
     50–300 are light tints for subtle backgrounds/hovers; 600–900 are
     the AA-safe "ink" shades used whenever gold-colored TEXT is needed
     on a light surface (gold-500 is ~2.4:1 on white — fails AA). */
  --gold-50:  #fbf6e7;
  --gold-100: #f5ead0;
  --gold-200: #ecd9a3;
  --gold-300: #e9d58a; /* "primary-light" */
  --gold-400: #d3b247;
  --gold-500: #c9a227; /* "primary" — brand gold, decorative/background/on-dark-text only */
  --gold-600: #b68f1e; /* "primary-hover" — ~3.0:1 on white, background/large-text only, not small text */
  --gold-700: #86671a; /* ~5.6:1 on white — AA body text */
  --gold-800: #6b4e10; /* ~7.7:1 on white — AA everywhere, the old --gold-ink */
  --gold-900: #4a3609;

  /* Secondary brand accent. Reuses the theme's existing ink hue rather
     than inventing an unrelated second brand color — this is a two-color
     luxury editorial palette (gold + near-black) by deliberate design
     (see the original AurumPress brief), so "secondary" is ink's own
     scale, not a new hue. */
  --secondary-100: #ece9e3;
  --secondary-300: #b9b3a8;
  --secondary-500: #55504a;
  --secondary-700: #2c2a26;
  --secondary-900: #1c1a17;

  /* Neutral ramp — a warm "editorial paper" family (not a cold gray
     scale): 0 is pure white, 25/50 are the "soft white" / "warm white"
     backgrounds a premium print-adjacent site uses to separate surfaces
     without any visible color, 950 is a deep charcoal (not flat black —
     a true #000-adjacent black reads harsh/cheap next to warm gold;
     charcoal reads as considered). Used for surfaces, backgrounds,
     borders, and body text. */
  --neutral-0:   #ffffff; /* pure white — page background AND card surfaces */
  --neutral-25:  #fcfcfa; /* card surface-hover — a hair off white, not a resting-state tint */
  --neutral-50:  #fafaf8; /* "background-secondary" */
  --neutral-75:  #f5f5f2; /* "background-tertiary" */
  --neutral-100: #f1f1ee; /* "border-light" */
  --neutral-200: #e7e7e3; /* "border" */
  --neutral-300: #cec5b6;
  --neutral-400: #8a8a8a; /* "text-muted" — large text/decorative use only, ~3.4:1 on white */
  --neutral-500: #7d7061; /* neutral gray secondary text — AA-safe, ~4.8:1 on white */
  --neutral-600: #555555; /* "text-secondary" */
  --neutral-700: #453f37;
  --neutral-800: #2b2621;
  --neutral-900: #201d19;
  --neutral-950: #1b1b1b; /* "text-primary" */

  /* Semantic status hues. Each has a subtle tinted background, a border,
     and a text color verified at ≥ 4.5:1 on that background. success/
     danger/info text colors ARE the exact brand hues (they clear AA
     directly); warning's brand hue (#D97706) does not (~3.2:1 on white
     at any reasonable background), so --warning-500 keeps the exact
     brand value for icons/borders/backgrounds while --warning-text is a
     darker AA-safe variant for anywhere the color IS the text — the same
     split already used for --gold-500 vs --gold-800. */
  --success-500:    #15803d;
  --success-bg:     #eaf6f0;
  --success-border: #a3d2b8;
  --success-text:   #15803d; /* 4.5:1 on --success-bg */
  --warning-500:    #d97706;
  --warning-bg:     #fdf3e0;
  --warning-border: #f0cf8a;
  --warning-text:   #8f5a00; /* 5.3:1 on --warning-bg — see note above */
  --danger-500:     #b91c1c;
  --danger-bg:      #fbe9e9;
  --danger-border:  #eab3b3;
  --danger-text:    #b91c1c; /* 5.5:1 on --danger-bg */
  --info-500:       #2563eb;
  --info-bg:        #ecf3fc;
  --info-border:    #b3cef0;
  --info-text:      #2563eb; /* 4.6:1 on --info-bg */

  /* ---------------------------------------------------------------------
   * 2. ALIAS TOKENS — what components actually use. Light mode values.
   * --------------------------------------------------------------------- */

  /* Text — three deliberate tiers. Primary for body copy/headings,
     secondary for supporting copy (bylines, card descriptions),
     muted for genuinely de-emphasized text (timestamps, hints, disabled-
     adjacent captions) — muted is decorative-weight only (~3.4:1), never
     use it for anything that must stand alone as small body text. */
  --color-text-primary:   var(--neutral-950);
  --color-text-secondary: var(--neutral-600);
  --color-text-muted:     var(--neutral-400);
  --color-text-on-dark:   var(--neutral-0);
  --color-text-accent:    var(--gold-800); /* AA-safe gold text */
  --color-text-disabled:  var(--neutral-400);
  --color-text-link:      var(--gold-800);
  --color-text-link-hover: var(--neutral-950);

  /* Surfaces / backgrounds. Cards are pure white — the SAME white as the
     page — by deliberate choice: nothing marks a card as a "box" until
     you interact with it (--color-surface-hover, a hair off white, only
     on :hover). background-secondary/tertiary give alternating sections
     two further steps of quiet warmth without ever using a gray. */
  --color-bg:             var(--neutral-0);
  --color-bg-subtle:      var(--neutral-50);   /* "background-secondary" */
  --color-bg-tertiary:    var(--neutral-75);   /* "background-tertiary" */
  --color-surface:        var(--neutral-0);    /* cards, popovers — same as page background */
  --color-surface-hover:  var(--neutral-25);   /* card hover only */
  --color-surface-inverse-fixed: #1c1a17;      /* always-dark surface (promo bar, hero base, footer) — intentionally NOT theme-aware, see docs */
  --color-surface-inverse-fixed-text: #ffffff;

  /* Borders */
  --color-border:         var(--neutral-200);
  --color-border-light:   var(--neutral-100); /* even quieter than --color-border — dividers inside a component, not around it */
  --color-border-strong:  var(--neutral-950);
  --color-border-hover-accent: var(--gold-300); /* subtle gold border-on-hover for cards — deliberately lighter than the brand gold used for buttons/focus */

  /* Interactive */
  --color-interactive:          var(--gold-500);
  --color-interactive-text:     var(--neutral-950); /* text drawn ON a gold-500 surface */
  --color-interactive-hover:    var(--gold-600);
  --color-interactive-active:   var(--gold-700);
  --color-interactive-border:   var(--neutral-950);
  --color-interactive-border-hover: var(--gold-500);
  --color-focus-ring:           var(--gold-800);
  --color-disabled-bg:          var(--neutral-100);
  --color-disabled-border:      var(--neutral-200);
  --color-disabled-text:        var(--color-text-disabled);

  /* For components whose background is deliberately the *inverse* of the
     page (e.g. .aur-newsletter: bg var(--color-text-primary), text
     var(--white) — always contrasts because these two tokens are each
     other's opposite in every mode). Secondary text drawn on that
     inverted surface needs its OWN
     mode-aware muted tone; it must NOT be a fixed light gray, or it goes
     light-on-light the moment dark mode flips the surface light too. */
  --color-text-on-contrast-muted:   var(--neutral-300);
  --color-border-on-contrast:       rgba(255, 255, 255, 0.25);
  --color-bg-on-contrast-subtle:    rgba(255, 255, 255, 0.06);

  /* Status, aliased for component use */
  --color-success-bg: var(--success-bg); --color-success-border: var(--success-border); --color-success-text: var(--success-text);
  --color-warning-bg: var(--warning-bg); --color-warning-border: var(--warning-border); --color-warning-text: var(--warning-text);
  --color-danger-bg:  var(--danger-bg);  --color-danger-border:  var(--danger-border);  --color-danger-text:  var(--danger-text);
  --color-info-bg:    var(--info-bg);    --color-info-border:    var(--info-border);    --color-info-text:    var(--info-text);

  /* "Inverse fixed" — surfaces that are always dark regardless of
     light/dark mode (hero, promo bar, newsletter block: a deliberate
     design choice, not a light/dark bug — see the note on
     --color-surface-inverse-fixed above). These do NOT change under
     [data-theme="dark"]; that's the point of "fixed". */
  --color-text-inverse-fixed:           #ffffff;
  --color-text-inverse-fixed-secondary: #d8d3c8;
  --color-text-inverse-fixed-muted:     #9d9788;
  --color-border-inverse-fixed-subtle:  rgba(255, 255, 255, 0.16);
  --color-border-inverse-fixed:         rgba(255, 255, 255, 0.25);
  --color-border-inverse-fixed-strong:  rgba(255, 255, 255, 0.4);
  --color-bg-inverse-fixed-subtle:      rgba(255, 255, 255, 0.06);
  --color-bg-inverse-fixed-subtle-2:    rgba(255, 255, 255, 0.08);
  --texture-inverse-fixed-overlay:      rgba(255, 255, 255, 0.035);

  /* Footer — its own fixed-dark surface (a considered brand choice, same
     "inverse fixed" family as the hero/promo bar, not a mode-driven
     color): a large, dark, editorial-style footer reads as more
     authoritative/premium than continuing the page's light background
     all the way to the bottom of every page. */
  --color-footer-bg:     #111111;
  --color-footer-text:   #dddddd;
  --color-footer-muted:  #8c8c8c;
  --color-footer-border: rgba(255, 255, 255, 0.1);

  /* Decorative gold glow (hero background radial gradients) — derived
     from the gold-500 global token via color-mix, not a separate raw
     value, so the glow always tracks the brand hue. */
  --gradient-glow-strong: color-mix(in srgb, var(--gold-500) 35%, transparent);
  --gradient-glow-soft:   color-mix(in srgb, var(--gold-500) 18%, transparent);

  /* Fixed dark gradient the hero sits on (always-dark surface, see
     --color-surface-inverse-fixed). */
  --gradient-hero-stop-1: #1c1a17;
  --gradient-hero-stop-2: #241f18;
  --gradient-hero-stop-3: #14110c;

  /* ---------------------------------------------------------------------
   * Legacy aliases — every name style.css already used before the token
   * system existed. Kept so existing component CSS needs zero rewrites;
   * new components should prefer the --color-*/--font-*/etc. names above.
   * --------------------------------------------------------------------- */
  --ink-soft: var(--color-text-secondary);
  --white:    var(--color-bg);
  --bg-light: var(--color-bg-subtle);
  --card:     var(--color-surface);
  --gold:     var(--gold-500);
  --gold-ink: var(--color-text-accent);
  --line:     var(--color-border);
  --radius:   var(--radius-md);
  --shadow:   var(--shadow-md);
  --maxw:     var(--container-wide);
  --content-w: var(--container-content);
  --ease:     var(--ease-standard);

  /* ---------------------------------------------------------------------
   * Typography
   * --------------------------------------------------------------------- */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid type scale — clamp(min, preferred-vw, max). Ratio ~1.2-1.35. */
  --text-caption:  clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-small:    clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);
  --text-body-sm:  clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --text-body:     clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-label:    clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --text-button:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --text-nav:      clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);
  --text-h6:       clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
  --text-h5:       clamp(1.125rem, 1.08rem + 0.3vw, 1.25rem);
  --text-h4:       clamp(1.25rem, 1.18rem + 0.4vw, 1.5rem);
  --text-h3:       clamp(1.5rem, 1.38rem + 0.7vw, 1.875rem);
  --text-h2:       clamp(1.625rem, 1.4rem + 1.4vw, 2.125rem);
  --text-h1:       clamp(1.75rem, 1.35rem + 2.4vw, 2.375rem);
  --text-hero:     clamp(2rem, 1.1rem + 4.8vw, 3.375rem);

  --leading-tight:   1.2;
  --leading-heading: 1.25;
  --leading-body:    1.65;
  --leading-relaxed: 1.75;

  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-wider:  0.06em;
  --tracking-widest: 0.14em;

  --measure-reading: 65ch; /* prose line length */

  /* ---------------------------------------------------------------------
   * Spacing scale (4px base unit)
   * --------------------------------------------------------------------- */
  --space-1:  0.25rem; /* 4  */
  --space-2:  0.5rem;  /* 8  */
  --space-3:  0.75rem; /* 12 */
  --space-4:  1rem;    /* 16 */
  --space-5:  1.25rem; /* 20 */
  --space-6:  1.5rem;  /* 24 */
  --space-8:  2rem;    /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */
  --space-32: 8rem;    /* 128 */

  /* Half-steps — fill gaps in the base scale for fine-grained UI spacing
     (icon gaps, chip padding, tight card padding) without falling back
     to a raw px value. Same idea as the base scale, twice the density. */
  --space-1-5: 0.375rem; /* 6  */
  --space-2-5: 0.625rem; /* 10 */
  --space-3-5: 0.875rem; /* 14 */
  --space-4-5: 1.125rem; /* 18 */
  --space-7:   1.75rem;  /* 28 */
  --space-11:  2.75rem;  /* 44 */
  --space-14:  3.5rem;   /* 56 */

  --space-section: var(--space-24); /* vertical rhythm between page sections — generous on purpose, see Phase 3 "every section should breathe" */
  --space-gutter: var(--space-5); /* mobile container gutter */

  /* ---------------------------------------------------------------------
   * Radius scale
   * --------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   0.5rem;   /* 8px  */
  --radius-md:   0.75rem;  /* 12px */
  --radius-lg:   1rem;     /* 16px */
  --radius-xl:   1.5rem;   /* 24px */
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
   * Elevation (light mode) — kept deliberately faint (a premium editorial
   * page reads as flat paper with a hint of lift on hover, never a
   * drop-shadow-heavy "app card" look). rgba base is the deep-charcoal
   * ink color, not black, so shadows read warm rather than muddy.
   * --------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(28, 26, 23, 0.04);
  --shadow-sm: 0 2px 6px rgba(28, 26, 23, 0.05);
  --shadow-md: 0 6px 20px rgba(28, 26, 23, 0.06);
  --shadow-lg: 0 12px 36px rgba(28, 26, 23, 0.08);
  --shadow-xl: 0 24px 60px rgba(28, 26, 23, 0.10);

  /* ---------------------------------------------------------------------
   * Borders
   * --------------------------------------------------------------------- */
  --border-width-hairline: 1px;
  --border-width-thick:    2px;
  --border-width-heavy:    4px;
  --border-focus-width:    2px;
  --border-focus-offset:   3px;

  /* ---------------------------------------------------------------------
   * Grid / container
   * --------------------------------------------------------------------- */
  --container-content: 760px;
  --container-wide:    1280px;
  --container-full:    100%;
  --grid-gutter-sm: var(--space-5);  /* < 768px  */
  --grid-gutter-md: var(--space-6);  /* >= 768px */
  --grid-gutter-lg: var(--space-8);  /* >= 1280px */

  /* .aur-header is position: fixed (an overlay, not a flow element) so it
     can sit transparently over the front page's hero — everything else
     needs to compensate for the space it would otherwise occupy. Kept as
     one token so the header's own padding and this compensation can
     never silently drift apart. */
  --header-height: 4.75rem; /* 76px */

  /* Breakpoints — informational only. CSS custom properties cannot be
     read inside @media conditions, so every @media rule in this theme
     hardcodes these same pixel values directly; keep both in sync by
     hand. Exposed here for JS (matchMedia) and documentation. */
  --bp-xs:   360px;
  --bp-sm:   390px;
  --bp-sm-2: 430px;
  --bp-md:   768px;
  --bp-lg:   1024px;
  --bp-xl:   1280px;
  --bp-xxl:  1440px;
  --bp-xxxl: 1920px;

  /* ---------------------------------------------------------------------
   * Motion
   * --------------------------------------------------------------------- */
  /* Kept within 200-300ms across the board (150ms for micro hover
     feedback is the one deliberate exception) — a premium editorial page
     uses motion to acknowledge an interaction, never to perform one. */
  --duration-fast: 150ms; /* hover/focus micro-feedback */
  --duration-base: 250ms; /* default transitions */
  --duration-slow: 300ms; /* scroll-reveal, larger crossfades */
  --ease-standard:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0.1, 1);

  /* ---------------------------------------------------------------------
   * Icons (Lucide) — size, spacing, color rules
   * --------------------------------------------------------------------- */
  --icon-size-sm: 1rem;      /* 16px — inline with small text/labels */
  --icon-size-md: 1.25rem;   /* 20px — default, buttons/nav */
  --icon-size-lg: 1.5rem;    /* 24px — standalone/feature icons */
  --icon-size-xl: 2rem;      /* 32px — hero/empty-state */
  --icon-stroke-width: 1.75;
  --icon-gap: var(--space-2); /* space between an icon and adjacent text */
  --icon-color: currentColor; /* default: inherit text color, never hardcode */
  --icon-color-muted: var(--color-text-secondary);
  --icon-color-accent: var(--color-text-accent);
}

/* ===========================================================================
 * Dark mode — redefine ALIAS tokens only. Global/raw ramps never change;
 * status hues and the gold ramp stay put (gold-500 is AA-safe as text on
 * dark, see --color-text-accent below), only what each alias *points to*
 * changes. Two triggers, same values: OS preference (unless the visitor
 * explicitly chose light), and the explicit [data-theme] switch persisted
 * by assets/js/main.js.
 * ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-text-primary:   #f1eee8;
    --color-text-secondary: #b9b3a8;
    --color-text-on-dark:   #f1eee8;
    --color-text-accent:    var(--gold-400); /* on dark, gold-400 clears AA (~7.8:1) */
    --color-text-link:      var(--gold-400);
    --color-text-link-hover: #f1eee8;

    --color-bg:        #17140f;
    --color-bg-subtle: #1e1a14;
    --color-surface:   #221e17;

    --color-border:        #3a332a;
    --color-border-strong: #f1eee8;

    --color-interactive-text:   #1c1a17;
    --color-interactive-border: #f1eee8;
    --color-focus-ring:         var(--gold-400);
    --color-disabled-bg:        #2b2621;
    --color-disabled-border:    #3a332a;
    --color-text-on-contrast-muted: var(--secondary-500);
    --color-border-on-contrast:     rgba(0, 0, 0, 0.18);
    --color-bg-on-contrast-subtle:  rgba(0, 0, 0, 0.04);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 28px 72px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --color-text-primary:   #f1eee8;
  --color-text-secondary: #b9b3a8;
  --color-text-on-dark:   #f1eee8;
  --color-text-accent:    var(--gold-400);
  --color-text-link:      var(--gold-400);
  --color-text-link-hover: #f1eee8;

  --color-bg:        #17140f;
  --color-bg-subtle: #1e1a14;
  --color-surface:   #221e17;

  --color-border:        #3a332a;
  --color-border-strong: #f1eee8;

  --color-interactive-text:   #1c1a17;
  --color-interactive-border: #f1eee8;
  --color-focus-ring:         var(--gold-400);
  --color-disabled-bg:        #2b2621;
  --color-disabled-border:    #3a332a;
  --color-text-on-contrast-muted: var(--secondary-500);
  --color-border-on-contrast:     rgba(0, 0, 0, 0.18);
  --color-bg-on-contrast-subtle:  rgba(0, 0, 0, 0.04);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 28px 72px rgba(0, 0, 0, 0.5);
}

/* RTL: logical properties (inset-inline-*, margin-inline-*, text-align:
   start/end) are used throughout component CSS instead of left/right, so
   the whole system mirrors automatically under dir="rtl" (set by
   language.php for Arabic) with no separate RTL token set required. */