/* ============================================================
   RENOVATE — Canonical design tokens
   Ported 1:1 from StokaTerminal 2.1:
     StokaTerminal-2.1/frontend/src/styles/variables.css  (:root dark block)
   Loaded by page() BEFORE styles.css so every feature rule resolves
   against these. Renovate is dark-only: there is NO [data-theme=light]
   block here (page() hard-codes data-theme="dark").
   styles.css holds feature CSS only and never redefines a token.
   ============================================================ */

:root {
  /* ── Background Colors ─────────────────────────────────── */
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-tertiary: #1a1a24;
  --card-bg: rgba(255, 255, 255, 0.02);
  --card-bg-hover: rgba(255, 255, 255, 0.05);
  --card-bg-selected: rgba(255, 255, 255, 0.08);
  --overlay-bg: rgba(10, 10, 15, 0.95);
  --dropdown-bg: rgba(20, 20, 28, 0.98);
  --modal-overlay: rgba(0, 0, 0, 0.75);
  --glass-bg: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 255, 255, 0.06);

  /* ── Text Colors ───────────────────────────────────────── */
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --text-tertiary: #d1d5db;
  --text-muted: #6b7280;

  /* ── Accent Colors — Stoka Crimson ─────────────────────── */
  --blue-400: #E8365A;
  --blue-500: #DC143C;
  --blue-600: #B8112E;
  --blue-hover: #E8365A;
  --accent-primary: #DC143C;
  --accent-secondary: #B8112E;
  --accent-hover: #E8365A;
  --accent-glow: rgba(220, 20, 60, 0.3);
  --accent-subtle: rgba(220, 20, 60, 0.1);

  /* ── Accent Colors — Purple ────────────────────────────── */
  --purple-500: #a78bfa;
  --purple-600: #8b5cf6;

  /* ── Accent Colors — Red ───────────────────────────────── */
  --red-400: #f28b82;
  --red-500: #ea4335;
  --red-light: #f8bbb9;

  /* ── Accent Colors — Green ─────────────────────────────── */
  --green-400: #81c995;
  --green-500: #34a853;

  /* ── Accent Colors — Yellow/Amber ──────────────────────── */
  --amber-400: #fdd663;
  --amber-500: #fbbc04;

  /* ── Status (renovate aliases for the feature CSS) ─────── */
  --success: #81c995;
  --error: #f28b82;
  --warning: #fdd663;

  /* ── Border Colors ─────────────────────────────────────── */
  --border-default: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.12);
  --border-active: rgba(255, 255, 255, 0.18);
  --border-strong: rgba(255, 255, 255, 0.25);
  --border-accent: rgba(220, 20, 60, 0.3);
  --sidebar-border: #1f1f28;

  /* ── Status Colors — Success ───────────────────────────── */
  --status-success-bg: rgba(129, 201, 149, 0.15);
  --status-success-border: rgba(129, 201, 149, 0.3);
  --status-success-text: #81c995;

  /* ── Status Colors — Error ─────────────────────────────── */
  --status-error-bg: rgba(242, 139, 130, 0.15);
  --status-error-border: rgba(242, 139, 130, 0.3);
  --status-error-text: #f28b82;

  /* ── Status Colors — Warning/Info ──────────────────────── */
  --status-warning-bg: rgba(253, 214, 99, 0.15);
  --status-warning-border: rgba(253, 214, 99, 0.3);
  --status-warning-text: #fdd663;

  /* ── Status Colors — Pending/Muted ─────────────────────── */
  --status-pending-bg: rgba(156, 163, 175, 0.1);
  --status-pending-border: rgba(156, 163, 175, 0.3);
  --status-pending-text: #9ca3af;

  /* ── Spacing ───────────────────────────────────────────── */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* ── Typography ────────────────────────────────────────── */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.875rem;
  --font-size-md: 0.9rem;
  --font-size-lg: 0.9375rem;
  --font-size-xl: 1rem;
  --font-size-2xl: 1.1rem;
  --font-size-3xl: 1.25rem;
  --font-size-4xl: 1.5rem;
  --font-size-5xl: 2rem;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-semibold-plus: 650;
  --font-weight-bold: 700;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0.02em;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.08em;
  --letter-spacing-widest: 0.1em;
  --letter-spacing-logo: 0.28em;

  --line-height-tight: 1;
  --line-height-normal: 1.2;
  --line-height-relaxed: 1.5;
  --line-height-loose: 1.6;

  /* ── Border Radius ─────────────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 12px;
  --radius-3xl: 16px;
  --radius-full: 9999px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-fab: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  --shadow-glow: 0 0 20px var(--accent-glow);
  --shadow-progress: 0 0 8px var(--accent-glow);

  /* ── Glass Effect ──────────────────────────────────────── */
  --glass-blur: 20px;

  /* ── Transitions ───────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ── Z-Index ───────────────────────────────────────────── */
  --z-base: 1;
  --z-sidebar: 100;
  --z-fab: 999;
  --z-topnav: 1000;
  --z-dropdown: 1001;
  --z-modal: 1000;
  --z-toast: 10000;
}