/*
 * DeltaLoop Marketing - design tokens + accessibility primitives.
 *
 * Enqueued globally before the main stylesheet AND the block editor.
 * Ownership boundary:
 *   - Every CSS custom property the theme uses (colors, typography,
 *     spacing, motion, radii, layout).
 *   - The screen-reader-text + skip-link helpers required by the
 *     Theme Review handbook (header.php emits a `.skip-link
 *     .screen-reader-text` element).
 *
 * Block-level styles do NOT live here. Each block ships its own
 * frontend stylesheet via block.json's "style" key.
 *
 * Theme.json's own preset variables (`--wp--preset--color--*`,
 * `--wp--preset--font-family--*`, etc.) coexist with these legacy
 * names. Block CSS keeps using the legacy names during the rewrite;
 * theme.json drives the editor and any new block.
 */

:root,
[data-theme="dark"] {
  /* ═══ Surfaces ══════════════════════════════════════════ */
  --surface: #131318;
  --surface-canvas: #09090d;          /* deepest - page bg */
  --surface-stage: #0d0d13;           /* brand panel, lifted one step */
  --surface-paper: #17171d;           /* ledger card bg (warm near-black) */
  --surface-paper-hover: #1b1b22;
  --surface-container-lowest: #0e0e13; /* form input fills */
  --surface-container-low: #1b1b20;
  --surface-container: #1f1f25;
  --surface-container-high: #2a292f;
  --surface-container-highest: #35343a;
  --surface-bright: #39383e;

  /* ═══ Hairlines (borders) ═══════════════════════════════ */
  --hairline: rgba(255, 255, 255, 0.07);            /* default border */
  --hairline-strong: rgba(255, 255, 255, 0.12);     /* hover/focus */
  --hairline-accent: rgba(20, 227, 156, 0.35);      /* green-tinted focus */

  /* ═══ Text ══════════════════════════════════════════════ */
  --on-surface: #e4e1e9;
  --on-surface-variant: #c8c4d7;
  --outline: #928ea0;              /* muted/idle */
  --outline-variant: #474554;      /* dividers, deepest muted */
  --text-heading: #ffffff;

  /* ═══ Accent - Signal Green (promoted brand color) ═════ */
  --primary-container: #14e39c;    /* ELECTRIC EMERALD - main brand */
  --primary: #7ef7c5;               /* light mint - text on dark */
  --primary-deep: #0a9968;          /* deep emerald - pressed */
  --on-primary-container: #00140a;  /* near-black text on green */

  /* ═══ Secondary - Purple (demoted) ══════════════════════ */
  --secondary: #c6bfff;
  --secondary-container: #6c5ce7;   /* use SPARINGLY, never primary */
  --secondary-deep: #413996;

  /* ═══ Semantic ══════════════════════════════════════════ */
  --tertiary: #2dd4bf;              /* cyan - success (not brand) */
  --tertiary-container: #0e7f71;
  --error: #ffb4ab;                 /* soft coral */
  --error-container: #93000a;
  --warning: #fdcb6e;               /* amber */

  /* ═══ Gradients ═════════════════════════════════════════ */
  --gradient-primary: linear-gradient(135deg, #14e39c 0%, #7ef7c5 100%);
  --gradient-signal: linear-gradient(135deg, #14e39c 0%, #2dd4bf 50%, #7ef7c5 100%);
  --glass-bg: rgba(19, 19, 24, 0.60);
  --glass-blur: blur(20px);
  --shadow-ambient: 0 20px 40px rgba(0, 0, 0, 0.3);

  /* ═══ Grain texture (SVG noise) ═════════════════════════ */
  --noise-url: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* ═══ Radii ═════════════════════════════════════════════ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 12px;         /* default */
  --radius-lg: 16px;      /* hero cards only */
  --radius-xl: 24px;

  /* ═══ Motion durations ══════════════════════════════════ */
  --duration-instant: 100ms;    /* hover color change */
  --duration-fast: 180ms;       /* button press, focus ring */
  --duration-base: 260ms;       /* default transition */
  --duration-slow: 420ms;       /* page enter, rail slide */
  --duration-slower: 700ms;     /* signal trace, stage enter */

  /* ═══ Easing ════════════════════════════════════════════ */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);          /* DEFAULT */
  --ease-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ═══ Typography families ══════════════════════════════ */
  --font-sans:    "Geist", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: "Space Grotesk", "Geist", "Inter", sans-serif;
  --font-display: "Bricolage Grotesque", "Space Grotesk", "Geist", sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* ═══ Layout - nav clearance ═══════════════════════════
     The nav is position:fixed, so it takes no layout space.
     Everything below it either pads past --nav-height or pulls
     up by the same amount. --content-top-offset is the scroll /
     anchor offset: nav height + 8px of visual breathing room. */
  --nav-height: 56px;
  --content-top-offset: calc(var(--nav-height) + 8px);
}

/* ═══════════════════════════════════════════════════════════
   Accessibility helpers - required by header.php's skip-link.
   The skip-link sits visually hidden until it receives keyboard
   focus, at which point it slides into view at the top-left of
   the viewport. WordPress's Theme Review handbook treats this
   pair of selectors as canonical.
   ═══════════════════════════════════════════════════════════ */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--surface-paper);
  -webkit-clip-path: none;
          clip-path: none;
  clip: auto !important;
  color: var(--text-heading);
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  height: auto;
  left: 8px;
  line-height: normal;
  padding: 12px 18px;
  text-decoration: none;
  top: 8px;
  width: auto;
  z-index: 100000;
  outline: 2px solid var(--primary-container);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}