/* ═══════════════════════════════════════════
   TECHIFY EMPOWER — DESIGN TOKENS
   Single source of truth for typography, color, spacing.
   Load this BEFORE any other stylesheet.
═══════════════════════════════════════════ */

/* ── Webfonts ──
   Inter (variable axis for weight 450) + JetBrains Mono. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Font families ── */
  --ff-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ff-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

  /* ── Type scale ──
     Reference these vars, do not hardcode px values.
     Baseline bumped pre-v3.2 → body 15, meta floor 11/12 (Brendan issue #25). */
  --fs-2xs: 11px;  /* floor — micro badges, tiny uppercase labels */
  --fs-xs:  12px;  /* meta labels, small secondary text */
  --fs-sm:  14px;  /* nav items, compact UI, buttons */
  --fs-base: 15px; /* body default */
  --fs-md:  16px;  /* inputs (iOS zoom safe), section heads */
  --fs-lg:  18px;  /* icons, page titles */
  --fs-xl:  20px;  /* modal titles, large close buttons */
  --fs-2xl: 22px;  /* brand, popout icons */
  --fs-3xl: 28px;  /* stat values */

  /* ── Line-height scale ── */
  --lh-tight:   1.1; /* big numerics */
  --lh-heading: 1.3; /* headings */
  --lh-body:    1.5; /* body copy */

  /* ── Spacing scale ──
     4px base. Reference for padding/margin/gap. */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   56px;
  --space-10:  72px;

  /* ── Radius scale ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* ── Semantic colors — Dark (default) ──
     --danger already defined in shell.css; keeping here as the canonical source.
     Modules/shell should converge on these over time. */
  --success: #22c55e;
  --success-bg: rgba(34,197,94,0.10);
  --success-border: rgba(34,197,94,0.30);

  --warning: #f59e0b;
  --warning-bg: rgba(245,158,11,0.10);
  --warning-border: rgba(245,158,11,0.30);

  --info: #3b82f6;
  --info-bg: rgba(59,130,246,0.10);
  --info-border: rgba(59,130,246,0.30);

  /* Focus ring — for WCAG-visible keyboard focus.
     Used by the global :focus-visible rule below. */
  --focus-ring: 0 0 0 2px rgba(249,115,22,0.55);
}

/* ═══════════════════════════════════════════
   GLOBAL FOCUS-VISIBLE
   Keyboard-only focus indicator. Applied with !important because modules
   historically declared `selector:focus { outline: none }` to suppress the
   default browser ring — that still kills :focus, but :focus-visible only
   activates on keyboard navigation and the !important beats module-scoped
   outline:none overrides. Mouse clicks stay clean.
═══════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--accent, #f97316) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}
/* For elements that already have a border, offset the ring a bit more so
   the two don't visually merge. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent, #f97316) !important;
  outline-offset: 2px !important;
}

/* ── Semantic colors — Light theme ── */
body.light {
  --success: #16a34a;
  --success-bg: rgba(22,163,74,0.08);
  --success-border: rgba(22,163,74,0.25);

  --warning: #d97706;
  --warning-bg: rgba(217,119,6,0.08);
  --warning-border: rgba(217,119,6,0.25);

  --info: #2563eb;
  --info-bg: rgba(37,99,235,0.08);
  --info-border: rgba(37,99,235,0.25);

  --focus-ring: 0 0 0 2px rgba(232,101,14,0.55);
}

/* ═══════════════════════════════════════════
   CORE SURFACE / TEXT / ACCENT TOKENS
   Converged from shell.css so module iframes (which link tokens.css but
   not shell.css) theme correctly when they use ds-* classes. Values mirror
   shell.css exactly; shell.css keeps its own copy (loads later, identical).
═══════════════════════════════════════════ */
:root {
  --bg-card: rgba(17, 17, 17, 0.85);
  --bg-panel: rgba(0, 0, 0, 0.18);
  --bg-input: #1a1a1a;
  --bg-modal: #111;
  --bg-hover: #141414;
  --border-primary: #1a1a1a;
  --border-secondary: #141414;
  --border-input: #333;
  --text-primary: #f3f4f6;
  --text-secondary: #e5e7eb;
  --text-muted: #9ca3af;
  --text-dim: #6b7280;
  --text-faint: #6b7280;
  --text-empty: #4b5563;
  --accent: #f97316;
  --accent-hover: #ea6c0a;
  --accent-bg: rgba(249, 115, 22, 0.1);
  --accent-border: rgba(249, 115, 22, 0.3);
  --accent-glow: rgba(249, 115, 22, 0.12);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.1);
  --danger-border: rgba(239, 68, 68, 0.2);
}
body.light {
  --bg-card: rgba(255, 255, 255, 0.9);
  --bg-panel: rgba(0, 0, 0, 0.03);
  --bg-input: #fff;
  --bg-modal: #fff;
  --bg-hover: #f0f0f0;
  --border-primary: #e0e0e0;
  --border-secondary: #eaeaea;
  --border-input: #d0d0d0;
  --text-primary: #0a0a0a;
  --text-secondary: #1a1a1a;
  --text-muted: #3d3d3d;
  --text-dim: #555;
  --text-faint: #6b6b6b;
  --text-empty: #888;
  --accent: #e8650e;
  --accent-hover: #d35a0a;
  --accent-bg: rgba(232, 101, 14, 0.08);
  --accent-border: rgba(232, 101, 14, 0.25);
  --accent-glow: rgba(232, 101, 14, 0.08);
  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.08);
  --danger-border: rgba(220, 38, 38, 0.15);
}