/* =========================================================
   Awall — Shared Design Tokens
   Single source of truth for colors, typography, spacing,
   radius, shadows, and motion. Loaded BEFORE app-specific
   stylesheets in every template.
   ========================================================= */

:root {
  /* ── Colors: surfaces & text ───────────────────────────── */
  /* Mirror palettes.css [data-palette="p1"] so any surface that
     does not load palettes.css (the landing) reads identical
     values to the dashboard. */
  --color-bg:           #F5F6F8;
  --color-surface:      #ECEDF0;
  --color-elevated:     #ffffff;
  --color-border:       #dee0e5;
  --color-border-soft:  rgba(222, 224, 229, 0.6);

  --color-text-heading: #1f2937;
  --color-text-body:    #475569;
  --color-text-muted:   #656b78;  /* F4 #189: AA-tuned (was #6b7280, <4.5:1 on surface) */

  /* ── Colors: primary (brand blue) ──────────────────────── */
  /* Defaults match the P1 (Slate Comfort) ship hue so any surface
     that paints before [data-palette] is set still reads on-brand.
     palettes.css P1 overrides these with identical values. */
  --color-primary:       #3b66d4;
  --color-primary-hover: #2d52bd;
  --color-primary-light: #dde7fb;
  --color-primary-soft:        rgba(59, 102, 212, 0.08);
  --color-primary-ring:        rgba(59, 102, 212, 0.25);
  --color-primary-ring-strong: rgba(59, 102, 212, 0.30);
  --color-primary-glow:        rgba(59, 102, 212, 0.40);
  --color-primary-glow-faint:  rgba(59, 102, 212, 0.05);
  --color-primary-focus-ring:  rgba(59, 102, 212, 0.12);
  --color-primary-border-soft: rgba(59, 102, 212, 0.20);

  /* ── Colors: accent (brand purple) ─────────────────────── */
  --color-accent:             #8B5CF6;
  --color-accent-hover:       #7c3aed;
  --color-accent-soft:        rgba(139, 92, 246, 0.10);
  --color-accent-ring:        rgba(139, 92, 246, 0.25);
  --color-accent-glow:        rgba(139, 92, 246, 0.40);
  --color-accent-border-soft: rgba(139, 92, 246, 0.22);
  --color-accent-bg:          #ede9fe;
  /* Strong-Semantic Rule companion: text on --color-accent-bg uses
     --color-accent-strong so the AWall-LLM trigger chip clears AA. */
  --color-accent-strong:      #5b21b6;

  /* ── Colors: semantic ──────────────────────────────────── */
  --color-danger-soft:        rgba(220, 38, 38, 0.08);
  --color-danger-border-soft: rgba(220, 38, 38, 0.20);
  --color-success-border-soft:rgba(22, 163, 74, 0.20);
  --color-warning-border-soft:rgba(245, 158, 11, 0.30);

  /* Jailbreak family (teal) — fifth distinct guardrail-chip hue, sits
     outside danger/warning/accent so the five categories stay readable
     side-by-side. ~7.5:1 contrast (AAA). */
  --color-jailbreak-bg:          #f0fdfa;
  --color-jailbreak-strong:      #0f766e;
  --color-jailbreak-border-soft: rgba(13, 148, 136, 0.22);

  --color-pre-bg:   #0F172A;
  --color-pre-text: #e2e8f0;

  --color-overlay-modal: rgba(15, 23, 42, 0.48);
  --color-overlay-panel: rgba(15, 23, 42, 0.35);

  --color-sidebar-bg:          #1c1f28;
  --color-sidebar-text:        #94a3b8;
  --color-sidebar-text-strong: #e2e8f0;
  --color-sidebar-active-text: #ffffff;
  --color-sidebar-active-bg:   rgba(59, 102, 212, 0.18);
  --color-sidebar-hover-bg:    rgba(255, 255, 255, 0.05);
  --color-sidebar-brand-border:rgba(255, 255, 255, 0.06);
  --color-sidebar-glow-soft:   rgba(59, 102, 212, 0.22);
  /* Sidebar is always dark, regardless of [data-theme]; this danger
     tint is calibrated to read on Sidebar Charcoal (~10:1, AAA). */
  --color-sidebar-danger:      #fca5a5;
  --color-sidebar-danger-soft: rgba(252, 165, 165, 0.10);

  --color-success:        #16a34a;
  --color-success-bg:     #f0fdf4;
  --color-success-strong: #15803d;
  --color-danger:         #dc2626;
  --color-danger-bg:      #fef2f2;
  --color-danger-strong:  #b91c1c;
  --color-warning:        #f59e0b;
  --color-warning-bg:     #fffbeb;
  --color-warning-strong: #92400e;
  --color-info-bg:        #eff6ff;
  --color-info-strong:    #1e40af;
  --color-monitor-bg:     #fef3c7;
  --color-monitor-text:   #92400e;

  /* ── Typography ────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Fira Mono', ui-monospace, monospace;

  /* ── Spacing scale (4px base) ─────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* ── Touch target floor (WCAG 2.5.5) ──────────────────── */
  --touch-target-min: 40px;

  /* ── Radius ────────────────────────────────────────────── */
  --radius-tag:   4px;
  --radius-btn:   6px;
  --radius-input: 8px;
  --radius-card:  12px;
  --radius-pill:  9999px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-card:   0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-modal:  0 4px 12px rgba(15, 23, 42, 0.10);
  --shadow-lift:   0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg:     0 8px 24px rgba(15, 23, 42, 0.12);

  /* ── Motion ────────────────────────────────────────────── */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Breakpoints (F1 #186) ─────────────────────────────── */
  /* Canonical responsive ladder. NOTE: CSS custom properties CANNOT be used
     inside @media query conditions — author @media against the px values
     documented in DESIGN.md → "Responsive breakpoints". These tokens exist
     for JS reads and future container queries. F5 (#190) standardises on them. */
  --bp-xs: 30rem;     /* 480px  — tight mobile             */
  --bp-sm: 37.5rem;   /* 600px  — compact / single column  */
  --bp-md: 48rem;     /* 768px  — mobile↔desktop, drawer   */
  --bp-lg: 68.75rem;  /* 1100px — multi-column grid reflow */

  /* ── Z-index scale (F1 #186) ───────────────────────────── */
  /* Semantic ladder — never use arbitrary z values (no 999 / 9999). */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-drawer:   300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;
  --z-tooltip:  700;

  /* ── Focus ring (F1 #186 — consumed by F4 a11y, #189) ──── */
  /* --color-primary-focus-ring is theme-aware (overridden under
     [data-theme="dark"]); --focus-ring resolves it at use time. */
  --focus-ring-width:  3px;
  --focus-ring-offset: 2px;
  --focus-ring: 0 0 0 var(--focus-ring-width) var(--color-primary-focus-ring);
}

[data-theme="dark"] {
  /* Mirror palettes.css [data-palette="p1"][data-theme="dark"]. */
  --color-bg:           #1a1f2c;
  --color-surface:      #232a3a;
  --color-elevated:     #2c3445;
  --color-border:       #3a4356;
  --color-border-soft:  rgba(58, 67, 86, 0.7);

  --color-text-heading: #e2e8f0;
  --color-text-body:    #b9c1d2;
  --color-text-muted:   #959dad;  /* F4 #189: AA-tuned (was #8c95a6, <4.5:1 on elevated) */

  --color-primary:       #5882e8;
  --color-primary-hover: #6e93ed;
  --color-primary-light:       rgba(88, 130, 232, 0.18);
  --color-primary-soft:        rgba(88, 130, 232, 0.12);
  --color-primary-ring:        rgba(88, 130, 232, 0.35);
  --color-primary-ring-strong: rgba(88, 130, 232, 0.45);
  --color-primary-glow:        rgba(88, 130, 232, 0.50);
  --color-primary-glow-faint:  rgba(88, 130, 232, 0.10);
  --color-primary-focus-ring:  rgba(88, 130, 232, 0.22);
  --color-primary-border-soft: rgba(88, 130, 232, 0.32);

  --color-accent:             #8B5CF6;
  --color-accent-hover:       #a78bfa;
  --color-accent-soft:        rgba(139, 92, 246, 0.16);
  --color-accent-ring:        rgba(139, 92, 246, 0.40);
  --color-accent-glow:        rgba(139, 92, 246, 0.55);
  --color-accent-border-soft: rgba(139, 92, 246, 0.35);
  --color-accent-bg:          rgba(139, 92, 246, 0.18);
  --color-accent-strong:      #c4b5fd;

  --color-danger-soft:        rgba(239, 68, 68, 0.12);
  --color-danger-border-soft: rgba(239, 68, 68, 0.30);
  --color-success-border-soft:rgba(34, 197, 94, 0.30);
  --color-warning-border-soft:rgba(245, 158, 11, 0.40);

  --color-jailbreak-bg:          #0a2e2c;
  --color-jailbreak-strong:      #5eead4;
  --color-jailbreak-border-soft: rgba(94, 234, 212, 0.30);

  --color-pre-bg:   #050816;
  --color-pre-text: #cbd5e1;

  --color-overlay-modal: rgba(0, 0, 0, 0.62);
  --color-overlay-panel: rgba(0, 0, 0, 0.55);

  --color-sidebar-bg:          #1a1f2c;
  --color-sidebar-text:        #94a3b8;
  --color-sidebar-text-strong: #f1f5f9;
  --color-sidebar-active-text: #ffffff;
  --color-sidebar-active-bg:   rgba(88, 130, 232, 0.20);
  --color-sidebar-hover-bg:    rgba(255, 255, 255, 0.04);
  --color-sidebar-brand-border:rgba(255, 255, 255, 0.06);
  --color-sidebar-glow-soft:   rgba(88, 130, 232, 0.28);
  --color-sidebar-danger:      #fca5a5;
  --color-sidebar-danger-soft: rgba(252, 165, 165, 0.10);

  --color-success:        #22c55e;
  --color-success-bg:     #052e16;
  --color-success-strong: #4ade80;
  --color-danger:         #ef4444;
  --color-danger-bg:      #2d0a0a;
  --color-danger-strong:  #fca5a5;
  --color-warning:        #f59e0b;
  --color-warning-bg:     #1c1200;
  --color-warning-strong: #fbbf24;
  --color-info-bg:        #1e3a5f;
  --color-info-strong:    #93c5fd;
  --color-monitor-bg:     #2d1f00;
  --color-monitor-text:   #fbbf24;

  --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-modal: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lift:  0 12px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.5);
}