/* ═══════════════════════════════════════════════
   NX-UI Design System — tokens.css v2.0.0
   Design tokens: colors, typography, spacing, accent
   ═══════════════════════════════════════════════ */

/* Webfont @import removed in the native-feel pass — the system font stack needs no
   download (instant native render, no FOUT, no Google Fonts dependency). To restore the
   brand font, re-add: @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap'); */

/* Default UI font for all nx-ui apps: Inter (display=swap → system fallback first, no FOUT). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── Background layers ── */
  --bg-app: #050508;
  --bg-card: rgba(255,255,255, .03);
  --bg-card-hover: rgba(255,255,255, .06);
  --bg-sidebar: rgba(255,255,255, .02);
  --bg-glass: rgba(8,8,12, .5);          /* topbar / glass surfaces over themed bg */

  /* ── Borders ── */
  --border: rgba(255,255,255, .06);
  --border-hover: rgba(255,255,255, .1);
  --border-accent: rgba(0,212,255, .2);

  /* ── Text hierarchy ── */
  --text: #e8e8ef;
  --text-2: #8b8b9e;
  --text-3: #55556a;
  --fg-on-solid: #fff;     /* foreground (text/icon) on a solid colored / media / opaque-dark surface */
  --fg-on-light: #000;     /* foreground on a bright/light surface (e.g. prominent callout) */

  /* ── Status (semantic) ── */
  --ok: #00ff88;
  --warn: #ffb300;
  --err: #ff4d4d;
  --status-info: #e94560;  /* rose-red info accent — [data-status=info] badge/chip/pill (distinct from --accent) */
  --danger: #e0574d;       /* destructive-action red — auth/lightbox/toast error (softer than --err) */

  /* ── Accent (switchable) ── */
  /* Brand accent = purple (matches settings.js DEFAULTS.accent='purple' + ACCENTS.purple;
     runtime applyAccent() overrides these from the chosen swatch). Was cyan #00d4ff pre-8.6.0. */
  --accent: #a78bfa;
  --accent-glow: rgba(167, 139, 250, .12);
  --accent-bg: rgba(167, 139, 250, .04);
  --accent-border: rgba(167, 139, 250, .2);

  /* ── tone palette — [data-tone] accent identities (theme-independent) ──
     -rgb base feeds rgba() at per-context alpha; bare token is the fg/text tint. */
  --tone-cyan-rgb:   0,212,255;    --tone-cyan:   #5fdcff;
  --tone-green-rgb:  0,255,136;    --tone-green:  #5cffae;
  --tone-amber-rgb:  255,179,0;    --tone-amber:  #ffc94d;
  --tone-purple-rgb: 168,85,247;   --tone-purple: #c5a3fa;
  --tone-pink-rgb:   244,114,182;  --tone-pink:   #f7a4cf;

  /* ── Spacing ──
     --sp / --vsp now DERIVE from --app-scale (8.4.0). The separate Density and
     Vertical Spacing controls were merged into the single 'App Size' control for
     a synchronous, less-confusing Appearance UI. Base = settings.js defaults
     (24 / 56), not the old :root fallbacks (16 / 32). Verified safe: no rule
     multiplies --sp or --vsp by --app-scale again, so nothing double-scales. */
  --sp: calc(24px * var(--app-scale));
  --radius: 12px;
  --vsp: calc(56px * var(--app-scale));

  /* ── Section spacing (semantic, decoupled from raw --vsp) ──
     Section headers (.nx-section-t1 / .nx-section-t2 / .nx-section-t3) must NOT borrow the raw
     page rhythm (--vsp) for everything — that conflates two distinct intents and
     compounds into oversized gaps + double dividers. Two named tokens instead:
       --section-gap     header → its own content (header hugs what it labels)
       --section-rhythm  one section group → the next (the deliberate pause)
     Any nx-section consumer (20+ apps) inherits this single source of truth. */
  --section-gap: calc(var(--vsp) * 0.25);     /* ~14px — header → content */
  --section-rhythm: calc(var(--vsp) * 0.64);  /* ~36px — section → section */

  /* ── Typography ──
     System font stack (native feel — iOS SF Pro / Android Roboto / Windows Segoe UI
     render automatically per platform). Default switched from 'Outfit' for native
     rendering on the mobile-first PWA (native-feel pass, decision D3). To restore the
     brand font, swap display+body back to 'Outfit', sans-serif. Mono → ui-monospace
     native stack (was 'Space Mono'; kept as last fallback). */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* unified to Inter in the all-Inter pass (was monospace 'techy' labels); labels keep uppercase/letter-spacing via CSS, font is now Inter. */
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Brand alternative (pre native-feel pass): --font-display/-body: 'Outfit', sans-serif; --font-mono: 'Space Mono', monospace; */

  /* ── App scale (controls global element sizing — replaces font-only scale).
     NEW. Affects text + SVG icons + avatars + buttons + topbar/sidebar.
     Settings → 'App Size' controls this value. Range: 0.85 - 1.5. */
  --app-scale: 1;

  /* Minimum touch-target (native: iOS 44pt / Android 48dp). Apply as min-width/min-height
     on interactive controls so the tap zone is ≥44px even when the visual icon is smaller.
     Scales with --app-scale. (native-feel pass, D3 Phase 1) */
  --tap-min: calc(44px * var(--app-scale));

  /* ── Motion (native: spring physics) ──
     iOS 26 + Material 3 Expressive are both spring-based in 2026. No native CSS spring →
     cubic-bezier overshoot approximations. Neutralized automatically by data-motion=
     "reduced"/"none" (Motion setting + prefers-reduced-motion fallback). D3 Phase 2. */
  --motion-fast: 0.15s;
  --motion-base: 0.25s;
  --motion-slow: 0.34s;
  --ease-smooth: cubic-bezier(0.2, 0, 0.1, 1);        /* iOS-like, no overshoot */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* spring overshoot — sheets / gesture release */
  --ease-spring-soft: cubic-bezier(0.4, 1.3, 0.6, 1); /* gentle spring */

  /* ── Font sizes — scale via --app-scale.
     aligned to 2026 industry standards (Apple HIG + Material 3 + Instagram).
     Sources: Apple HIG iOS 19 (17pt body, 8pt grid), Material Design 3 (16sp body),
              Instagram DM observations (15px message text).
     See workspace/docs/audits/2026-05-27_nx-ui-industry-research.md
  */
  --text-xs: calc(11px * var(--app-scale));   /* captions, iOS minimum 11pt */
  --text-sm: calc(13px * var(--app-scale));   /* secondary, iOS 13pt footnote */
  --text-base: calc(15px * var(--app-scale)); /* iOS subhead 15pt, common UI label */
  --text-md: calc(16px * var(--app-scale));   /* chat/body — Material 16sp, native-leaning (was 15px Instagram-style) */
  --text-lg: calc(20px * var(--app-scale));   /* iOS title3 20pt */
  --text-xl: calc(24px * var(--app-scale));   /* iOS title2 22pt → 24 */
  --text-2xl: calc(32px * var(--app-scale));  /* iOS title1 28pt → display 32 */

  /* ── Badge width ── */
  --badge-w: 120px;

  /* ── Sidebar — scales с --app-scale ── */
  --side-collapsed: calc(56px * var(--app-scale));
  --side-expanded: calc(240px * var(--app-scale));

  /* ── Topbar — scales с --app-scale ── */
  --topbar-h: calc(52px * var(--app-scale));

  /* ── Mobile bottom nav h — unused as of v2.X.30 (feature removed) ── */
  /* --bottom-nav-h: 60px; */

  /* ── Background gradients (set by data-bg attribute) ── */
  --bg-grad-1: radial-gradient(ellipse 600px 400px at 20% 30%, rgba(0,80,120,.12), transparent);
  --bg-grad-2: radial-gradient(ellipse 500px 500px at 80% 70%, rgba(100,0,180,.08), transparent);
  --bg-grad-3: radial-gradient(ellipse 400px 300px at 50% 50%, rgba(0,212,255,.04), transparent);

  /* ── Elevation scale (P1.2 — single source for depth) ──
     Three semantic tiers extracted from the depth shadows scattered across base CSS.
     fx layers (effects.css) still add accent halos on top per [data-fx]; these are the
     neutral functional-separation shadows (value-identical to the prior literals). */
  --shadow-1: 0 2px 8px rgba(0,0,0,.45);    /* a1 — chips, small cards, subtle lift */
  --shadow-2: 0 6px 18px rgba(0,0,0,.45);   /* card default depth */
  --shadow-3: 0 0 40px rgba(0,0,0,.4);      /* floating overlay separation (sidebar/drawer) */

  /* ── Z-index scale (P1.2 — named stacking tiers) ──
     Replaces ad-hoc literals (1/10/25/30/60/100/200/1000/100000+) with intent names so
     stacking order is legible and collisions are visible. Values preserve current order. */
  --z-base: 1;          /* in-flow raised (pseudo-layers, ::before fills) */
  --z-raised: 10;       /* sidebar rail / sticky-ish in-page */
  --z-sticky: 25;       /* sticky sub-headers */
  --z-nav: 30;          /* mobile sidebar open */
  --z-topbar: 60;       /* topbar / live pill */
  --z-dropdown: 100;    /* dropdown / popover */
  --z-overlay: 200;     /* in-page overlays (search, inline sheets) */
  --z-drawer: 1000;     /* slide-in drawer scrim */
  --z-modal: 100000;    /* full-screen modal / lightbox */
  --z-toast: 100002;    /* toasts — always topmost */
}