/*!
 * Rankrix Theme — Design Tokens
 *
 * Every value the body-content layer uses, declared as CSS custom properties
 * on :root. Component stylesheets must consume these tokens; never hardcode
 * a colour, size, font, or duration in the component CSS.
 *
 * The chrome (assets/css/chrome.css) has its own --rkx-* and --rkxf-*
 * token namespaces per the E1 lift-verbatim mandate. They hold identical
 * accent values but stay separate because the chrome is shipped as a
 * coherent unit. Cross-coupling them would break the verbatim lift.
 *
 * Palette: 198°–220° hue band (Decision C2). Accent peaks at 213°
 * (Decision D-custom) — the median hue of the nebula imagery, harmonised
 * with the cursor-sparkle JS which centres on 208° ±10°.
 */

:root {

  /* ============================================================
   * COLOUR — BRAND
   * Brand-blue scale at hue 213°, saturation kept high so it reads
   * as "the nebula colour" rather than a generic blue.
   * ============================================================ */
  --rx-accent-50:  hsl(238 75% 95%);
  --rx-accent-100: hsl(238 75% 88%);
  --rx-accent-200: hsl(238 78% 78%);
  --rx-accent-300: hsl(238 90% 74%);    /* #818CF8-ish — text variant on dark, 7.16:1 */
  --rx-accent-400: hsl(238 82% 60%);
  --rx-accent-500: hsl(238 82% 52%);
  --rx-accent-600: #1D24CA;              /* primary — original uploaded indigo */
  --rx-accent-700: hsl(238 82% 38%);
  --rx-accent-800: hsl(238 82% 28%);
  --rx-accent-900: hsl(238 82% 18%);

  /* Convenience aliases */
  --rx-accent:        var(--rx-accent-600);  /* #1D24CA — original indigo */
  --rx-accent-hover:  #2D35E0;
  --rx-accent-soft:   #818CF8;
  --rx-accent-glow:   rgba(29, 36, 202, 0.45);
  --rx-accent-border: rgba(29, 36, 202, 0.55);

  /* ============================================================
   * COLOUR — NEUTRALS
   * Permanent dark mode. White text on glass surfaces against the
   * galactic background.
   * ============================================================ */
  --rx-white:           #ffffff;
  --rx-text:            #ffffff;
  --rx-text-muted:      hsla(0 0% 100% / 0.72);
  --rx-text-dim:        hsla(0 0% 100% / 0.45);
  --rx-text-faint:      hsla(0 0% 100% / 0.26);

  --rx-border:          hsla(0 0% 100% / 0.10);
  --rx-border-strong:   hsla(0 0% 100% / 0.22);

  --rx-surface:         hsla(0 0% 100% / 0.04);
  --rx-surface-raised:  hsla(0 0% 100% / 0.06);
  --rx-surface-hover:   hsla(0 0% 100% / 0.08);
  --rx-glass:           hsla(0 0% 0% / 0.58);    /* Pill base — matches chrome */
  --rx-glass-panel:     hsla(0 0% 0% / 0.52);    /* Menu/panel base — matches chrome */

  --rx-black:           #000000;

  /* Status colours (kept narrow until templates need more) */
  --rx-success: hsl(160 70% 45%);
  --rx-warning: hsl(38  92% 55%);
  --rx-danger:  hsl(0   75% 55%);

  /* ============================================================
   * TYPOGRAPHY — FONTS
   * Inter for display + body, JetBrains Mono for technical accents.
   * Loaded from Google Fonts via inc/enqueue.php. The chrome already
   * uses Inter, so referencing the same family keeps everything visually
   * consistent without a second font request.
   * ============================================================ */
  --rx-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rx-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rx-font-mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* ============================================================
   * TYPOGRAPHY — FLUID SIZES
   * clamp() interpolation from min (mobile) to max (4K). The body-content
   * layer scales smoothly; the chrome has its own discrete ladder per the
   * E1 verbatim mandate.
   *
   * clamp formula reminder:
   *   clamp(min, preferred, max)
   *   preferred = base-px + (vw-coefficient)
   *   The vw coefficient is calibrated so the value lands at `min` around
   *   320px viewport and at `max` around 3840px viewport.
   * ============================================================ */
  --rx-text-xs:   clamp(0.75rem, 0.70rem + 0.20vw, 1.00rem);   /* 12 → 16px */
  --rx-text-sm:   clamp(0.875rem, 0.80rem + 0.30vw, 1.125rem); /* 14 → 18px */
  --rx-text-base: clamp(1rem,    0.92rem + 0.35vw, 1.25rem);   /* 16 → 20px */
  --rx-text-lg:   clamp(1.125rem, 1.00rem + 0.55vw, 1.50rem);  /* 18 → 24px */
  --rx-text-xl:   clamp(1.25rem,  1.05rem + 0.85vw, 1.875rem); /* 20 → 30px */
  --rx-text-2xl:  clamp(1.5rem,   1.20rem + 1.30vw, 2.50rem);  /* 24 → 40px */
  --rx-text-3xl:  clamp(2rem,     1.50rem + 2.20vw, 3.75rem);  /* 32 → 60px */
  --rx-text-4xl:  clamp(2.5rem,   1.80rem + 3.10vw, 5.00rem);  /* 40 → 80px */
  --rx-text-5xl:  clamp(3rem,     2.00rem + 4.40vw, 6.50rem);  /* 48 → 104px */
  --rx-text-hero: clamp(3.5rem,   2.20rem + 5.70vw, 8.00rem);  /* 56 → 128px — page-hero scale */

  /* ============================================================
   * TYPOGRAPHY — LINE HEIGHTS AND WEIGHTS
   * ============================================================ */
  --rx-leading-tight:  1.15;
  --rx-leading-snug:   1.30;
  --rx-leading-normal: 1.55;   /* Body — per project rule (1.5–1.6) */
  --rx-leading-loose:  1.75;

  --rx-weight-regular: 400;
  --rx-weight-medium:  500;
  --rx-weight-semi:    600;
  --rx-weight-bold:    700;

  --rx-tracking-tight: -0.02em;
  --rx-tracking-snug:  -0.01em;
  --rx-tracking-wide:   0.04em;
  --rx-tracking-wider:  0.10em;
  --rx-tracking-mono:   0.12em;

  /* Line length cap for body prose. 75ch on desktop, narrower on mobile
   * via the layout's container width. Project rule: max 75 chars per line. */
  --rx-prose-measure: 75ch;

  /* ============================================================
   * SPACING — FLUID SCALE
   * Same clamp() approach as typography. Used for paddings, margins, gaps.
   * ============================================================ */
  --rx-space-1:  clamp(0.25rem, 0.22rem + 0.10vw, 0.375rem); /*  4 →  6px */
  --rx-space-2:  clamp(0.5rem,  0.45rem + 0.15vw, 0.75rem);  /*  8 → 12px */
  --rx-space-3:  clamp(0.75rem, 0.65rem + 0.30vw, 1.125rem); /* 12 → 18px */
  --rx-space-4:  clamp(1rem,    0.85rem + 0.45vw, 1.50rem);  /* 16 → 24px */
  --rx-space-5:  clamp(1.25rem, 1.05rem + 0.65vw, 2.00rem);  /* 20 → 32px */
  --rx-space-6:  clamp(1.5rem,  1.20rem + 0.95vw, 2.50rem);  /* 24 → 40px */
  --rx-space-8:  clamp(2rem,    1.50rem + 1.65vw, 4.00rem);  /* 32 → 64px */
  --rx-space-10: clamp(2.5rem,  1.80rem + 2.30vw, 5.00rem);  /* 40 → 80px */
  --rx-space-12: clamp(3rem,    2.20rem + 2.80vw, 6.00rem);  /* 48 → 96px */
  --rx-space-16: clamp(4rem,    2.80rem + 4.00vw, 8.00rem);  /* 64 → 128px */
  --rx-space-20: clamp(5rem,    3.20rem + 6.00vw, 10.0rem);  /* 80 → 160px */
  --rx-space-24: clamp(6rem,    3.50rem + 8.00vw, 12.0rem);  /* 96 → 192px */

  /* ============================================================
   * RADIUS
   * Matches the chrome's "almost square" 1px philosophy with optional
   * larger steps for cards and surfaces that need a softer feel.
   * ============================================================ */
  --rx-radius-px:   1px;
  --rx-radius-sm:   2px;
  --rx-radius-md:   4px;
  --rx-radius-lg:   8px;
  --rx-radius-pill: 9999px;

  /* ============================================================
   * MOTION
   * Easings and durations consistent with the chrome's animation timing.
   * Project rule: scroll-triggered reveals should sit between 200–400 ms
   * ease-out with travel under 24 px.
   * ============================================================ */
  --rx-ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --rx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --rx-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);

  --rx-dur-instant: 80ms;
  --rx-dur-fast:    160ms;
  --rx-dur-base:    280ms;
  --rx-dur-slow:    420ms;
  --rx-dur-glacial: 700ms;

  --rx-reveal-distance: 18px; /* under the project's 24px cap */

  /* ============================================================
   * Z-INDEX SCALE
   * Coordinated with the chrome (header z=1000, panel z=999,
   * footer z=998, overlay z=900, drawer z=1001, drawer backdrop z=999).
   * Body-content z-indexes stay below 900 to avoid colliding.
   * ============================================================ */
  --rx-z-base:    1;
  --rx-z-raised:  10;
  --rx-z-sticky:  100;
  --rx-z-overlay: 800;
  --rx-z-modal:   850;   /* still below chrome */
  /* 900–1010 reserved for the chrome — don't use in body content */

  /* ============================================================
   * SHADOWS
   * ============================================================ */
  --rx-shadow-sm: 0 1px 2px hsla(0 0% 0% / 0.4);
  --rx-shadow:    0 4px 16px hsla(0 0% 0% / 0.5);
  --rx-shadow-lg: 0 20px 60px hsla(0 0% 0% / 0.65), 0 1px 0 hsla(0 0% 100% / 0.05) inset;
  --rx-shadow-glow: 0 0 24px var(--rx-accent-glow);

  /* ============================================================
   * BREAKPOINTS (documented as CSS vars; not consumed by @media)
   * Media queries consume the same numbers as literals because CSS
   * @media doesn't accept custom properties. These vars exist so
   * JavaScript (which can read them via getComputedStyle) and any
   * future container-query work has a single source of truth.
   * ============================================================ */
  --rx-bp-xs:  320px;
  --rx-bp-sm:  640px;
  --rx-bp-md:  768px;
  --rx-bp-lg:  1024px;
  --rx-bp-xl:  1280px;
  --rx-bp-2xl: 1536px;
  --rx-bp-3xl: 1920px;
  --rx-bp-4xl: 2560px;
  --rx-bp-5xl: 3840px;
}

/* ============================================================================
 * REDUCED MOTION — globally tame transitions/animations.
 * The chrome has its own prefers-reduced-motion handling; this is the
 * body-content equivalent.
 * ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --rx-dur-instant: 0ms;
    --rx-dur-fast:    0ms;
    --rx-dur-base:    0ms;
    --rx-dur-slow:    0ms;
    --rx-dur-glacial: 0ms;
    --rx-reveal-distance: 0px;
  }
}