/* ═══════════════════════════════════════════════════════════
   PRIQO Design System — CSS Custom Properties
   Converted from theme.ts (architecture §18)
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── Gradient (outer page bg) ── */
    --gradient-start: #6C3CE1;
    --gradient-mid: #C850C0;
    --gradient-end: #FF6B6B;

    /* ── Container & Cards ── */
    --container-bg: #F4F7FA;
    --card-bg: #FFFFFF;
    --card-dark: #0A0A0A;
    --bg-input: #FFFFFF;
    --bg-card-hover: #F9FAFB;
    --bg-drawer: #FFFFFF;
    --bg-modal: #FFFFFF;

    /* ── Toast backgrounds ── */
    --bg-toast: #1F2937;
    --bg-toast-error: #FEE2E2;
    --bg-toast-success: #DCFCE7;
    --bg-toast-info: #DBEAFE;
    --bg-toast-warning: #FEF3C7;

    /* ── Text ── */
    --text-primary: #101828;
    --text-secondary: #667085;
    --text-muted: #6B7280;
    --text-subtle: #9CA3AF;
    --text-white: #FFFFFF;

    /* ── Accents ── */
    --accent-purple: #6C3CE1;
    --accent-text: #6C3CE1;
    --accent-pink: #C850C0;
    --accent-red: #FF6B6B;
    --accent-blue: #4158D0;
    --accent-green: #22C55E;

    /* ── Semantic ── */
    --color-critical: #EF4444;
    --color-warning: #F59E0B;
    --color-info: #3B82F6;
    --color-success: #22C55E;

    /* ── Borders ── */
    --border-default: #E5E7EB;
    --border-light: #F3F4F6;
    --border-focus: #6C3CE1;

    /* ── Typography ── */
    --font-heading: 'Outfit', 'DM Sans', system-ui, sans-serif;
    --font-body: 'DM Sans', 'Outfit', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */
    --text-4xl: 2.25rem;
    /* 36px */

    /* ── Spacing ── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* ── Border Radius ── */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 20px;
    --radius-xl: 32px;
    --radius-pill: 9999px;

    /* ── Shadows ── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
    --shadow-glow-purple: 0 0 20px rgba(108, 60, 225, 0.3);
    --shadow-container: 0 20px 80px rgba(0, 0, 0, 0.15);

    /* ── Transitions ── */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* ── Z-Index ── */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;

    /* ── Layout ── */
    --sidebar-width: 280px;
    --navbar-height: 60px;
    --container-max-width: 1400px;
    --shell-padding: 6px;

  /* ── New tokens (PRIQO-44) ── */
  --text-secondary: #667085;
  --bg-subtle: #F0F2F6;
  --text-body: #475467;
  --border-muted: #EAECF0;
  --text-heading: #0F172A;
  --bg-input-border: #E8ECF1;
  --color-success-dark: #16a34a;
  --color-critical-dark: #dc2626;
  --bg-hover: #F0F1F3;
  --accent-purple-light: #7C5CFC;
  --text-placeholder: #98A2B3;
  --border-card: #e4e7ec;
  --bg-elevated: #F8F9FB;
  --text-white: #FFFFFF;

  /* ── New tokens (PRIQO-44) ── */
  --accent-purple-subtle: rgba(108, 60, 225, 0.04);
  --accent-purple-wash: rgba(108, 60, 225, 0.07);
  --accent-purple-tint: rgba(108, 60, 225, 0.11);
  --accent-purple-light-alpha: rgba(108, 60, 225, 0.17);
  --accent-purple-medium-alpha: rgba(108, 60, 225, 0.25);
  --accent-purple-strong-alpha: rgba(108, 60, 225, 0.35);
  --color-critical-wash: rgba(239, 68, 68, 0.08);
  --color-warning-wash: rgba(245, 158, 11, 0.09);
  --color-success-wash: rgba(22, 163, 74, 0.1);
  --color-info-wash: rgba(59, 130, 246, 0.08);
  --accent-blue-wash: rgba(65, 88, 208, 0.08);
  --accent-purple-alt-wash: rgba(124, 92, 252, 0.05);

  /* ── Nav v2 Layout ── */
  --topbar-h: 72px;
  --rail-w: 56px;
  --rail-exp-w: 240px;
  --sub-panel-w: 272px;

  /* ── Rail Colors (Light) ── */
  --color-rail-bg: #FFFFFF;
  --color-rail-border: rgba(0, 0, 0, 0.06);
  --color-rail-active-bar: #6C3CE1;
  --color-rail-active-bg: rgba(108, 60, 225, 0.08);
  --color-rail-hover: #F4F5F9;
  --color-rail-label: #7C8493;

  /* ── Container & Surface (Nav v2) ── */
  --color-container-bg: #F4F7FA;
  --color-card-bg: #FFFFFF;
  --color-bg-elevated: #F0F2F6;
  --color-sidebar-bg: #FFFFFF;
  --color-sidebar-hover: #F4F5F9;
  --color-text-on-dark: #FFFFFF;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-card: rgba(0, 0, 0, 0.06);

  /* ── Transition presets ── */
  --transition-fast-cb: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal-cb: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════
   DARK THEME — Violet (default dark)
   ═══════════════════════════════════════════ */
html.dark {
  --color-container-bg: #0B0C14;
  --color-card-bg: #12131D;
  --color-bg-elevated: #1A1B26;
  --color-sidebar-bg: #12131D;
  --color-sidebar-hover: rgba(255,255,255,0.06);
  --text-primary: #F1F3F5;
  --text-secondary: #A1A7B4;
  --text-muted: #8B95A5;
  --text-subtle: #6B7280;
  --accent-purple: #B794F6;
  --accent-text: #98A4F7;
  --accent-pink: #D97BDB;
  --color-border: rgba(255,255,255,0.10);
  --color-border-card: rgba(255,255,255,0.08);
  --color-rail-bg: #12131D;
  --color-rail-border: rgba(255,255,255,0.08);
  --color-rail-active-bg: rgba(155,113,247,0.12);
  --color-rail-hover: rgba(255,255,255,0.06);
  --color-rail-label: #8B95A5;
  --border-default: rgba(255,255,255,0.10);
  --border-light: rgba(255,255,255,0.06);
  --card-bg: #12131D;
  --card-dark: #090A10;
  --container-bg: #0B0C14;
  --bg-input: #1A1B26;
  --bg-card-hover: rgba(255,255,255,0.04);
  --bg-drawer: #12131D;
  --bg-modal: #12131D;
  --bg-subtle: #1A1B26;
  --bg-elevated: #1A1B26;
  --bg-hover: rgba(255,255,255,0.06);
  --border-card: rgba(255,255,255,0.08);
  --border-muted: rgba(255,255,255,0.06);
  --text-heading: #F1F3F5;
  --text-body: #A1A7B4;
  --text-placeholder: #6B7280;
  --bg-input-border: rgba(255,255,255,0.10);
  --shadow-container: 0 20px 80px rgba(0,0,0,0.4);
  color-scheme: dark;
}

html.dark ::selection {
  background: rgba(139, 92, 246, 0.35);
  color: #F1F3F5;
}

/* ═══════════════════════════════════════════
   DARK THEME — Slate (blue accent)
   ═══════════════════════════════════════════ */
html.dark.slate {
  --color-container-bg: #020617;
  --color-card-bg: #0F172A;
  --color-bg-elevated: #1A1E2F;
  --color-sidebar-bg: #0F172A;
  --accent-purple: #3B82F6;
  --accent-text: #9EBDE8;
  --accent-pink: #60A5FA;
  --color-rail-bg: #0F172A;
  --color-rail-active-bg: rgba(59,130,246,0.12);
  --text-secondary: #94A3B8;
  --text-muted: #94A3B8;
  --color-rail-label: #94A3B8;
  --container-bg: #020617;
  --card-bg: #0F172A;
  --bg-input: #1A1E2F;
  --bg-subtle: #1A1E2F;
  --bg-elevated: #1A1E2F;
  --bg-drawer: #0F172A;
  --bg-modal: #0F172A;
  --bg-hover: rgba(255,255,255,0.06);
  --text-body: #94A3B8;
  --text-placeholder: #64748B;
}

html.dark.slate ::selection {
  background: rgba(59,130,246,0.35);
}

/* ═══════════════════════════════════════════
   DARK THEME — Deep Indigo
   ═══════════════════════════════════════════ */
html.dark.indigo {
  --color-container-bg: #0A0A1A;
  --color-card-bg: #111127;
  --color-bg-elevated: #1A1A35;
  --color-sidebar-bg: #111127;
  --accent-purple: #818CF8;
  --accent-text: #A5B2E8;
  --accent-pink: #A78BFA;
  --color-rail-bg: #111127;
  --color-rail-active-bg: rgba(99,102,241,0.12);
  --text-secondary: #94A3B8;
  --text-muted: #94A3B8;
  --color-rail-label: #94A3B8;
  --container-bg: #0A0A1A;
  --card-bg: #111127;
  --bg-input: #1A1A35;
  --bg-subtle: #1A1A35;
  --bg-elevated: #1A1A35;
  --bg-drawer: #111127;
  --bg-modal: #111127;
  --bg-hover: rgba(255,255,255,0.06);
  --text-body: #94A3B8;
  --text-placeholder: #64748B;
}

html.dark.indigo ::selection {
  background: rgba(99,102,241,0.35);
}