/* ============================================================
   MASH — Design System Tokens
   Corporate enterprise / dense / dark-first with light parity
   ============================================================ */

:root,
[data-theme="dark"] {
  /* ── Surfaces ─────────────────────────────────────────── */
  --bg-base: #0A0B0F;
  --bg-sunken: #070810;
  --bg-raised: #10131B;
  --bg-overlay: #151927;
  --bg-elevated: #1A1F2E;
  --bg-hover: #1E2432;
  --bg-active: #232A3B;
  --bg-inset: #0D0F16;

  /* ── Borders ──────────────────────────────────────────── */
  --border-subtle: #1A1F2E;
  --border-default: #232A3B;
  --border-strong: #2D3547;
  --border-focus: #4F46E5;

  /* ── Text ─────────────────────────────────────────────── */
  --text-primary: #E8EAF2;
  --text-secondary: #A5ABBD;
  --text-tertiary: #6B7389;
  --text-disabled: #454B5C;
  --text-on-accent: #FFFFFF;

  /* ── Brand (Indigo / Violet) ──────────────────────────── */
  --brand-50:  #EEF0FF;
  --brand-100: #DDE1FF;
  --brand-200: #B8BEFF;
  --brand-300: #8D95FF;
  --brand-400: #6B72F5;
  --brand-500: #4F46E5;
  --brand-600: #4338CA;
  --brand-700: #3730A3;
  --brand-800: #2A2484;
  --brand-900: #1E1A5E;
  --brand-glow: rgba(79, 70, 229, 0.35);

  /* ── Accent violet (secondary) ────────────────────────── */
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;

  /* ── Semantic ─────────────────────────────────────────── */
  --success-bg: rgba(16, 185, 129, 0.10);
  --success-border: rgba(16, 185, 129, 0.30);
  --success-fg: #34D399;
  --success-strong: #10B981;

  --warning-bg: rgba(245, 158, 11, 0.10);
  --warning-border: rgba(245, 158, 11, 0.30);
  --warning-fg: #FBBF24;
  --warning-strong: #F59E0B;

  --danger-bg: rgba(239, 68, 68, 0.10);
  --danger-border: rgba(239, 68, 68, 0.30);
  --danger-fg: #F87171;
  --danger-strong: #EF4444;

  --info-bg: rgba(59, 130, 246, 0.10);
  --info-border: rgba(59, 130, 246, 0.30);
  --info-fg: #60A5FA;
  --info-strong: #3B82F6;

  /* Compatibility aliases for plugin/admin pages and Twig blocks that
     predate the canonical token names. Keep these as references so a
     future appearance editor can still change the underlying tokens in
     one place. */
  --surface-page: var(--bg-base);
  --surface-panel: var(--bg-raised);
  --surface-panel-hover: var(--bg-hover);
  --surface-panel-border: var(--border-subtle);
  --surface-100: var(--bg-raised);
  --surface-200: var(--bg-elevated);
  --surface-2: var(--bg-elevated);
  --bg: var(--bg-base);
  --bg-card: var(--bg-raised);
  --bg-subtle: var(--bg-sunken);
  --bg-canvas: var(--bg-base);
  --bg-tertiary: var(--bg-inset);
  --border: var(--border-subtle);
  --text: var(--text-primary);
  --text-soft: var(--text-secondary);
  --text-dim: var(--text-tertiary);
  --text-danger: var(--danger-fg);
  --brand: var(--brand-500);
  --brand-fg: var(--text-on-accent);
  --primary-500: var(--brand-500);
  --accent-500: var(--violet-500);
  --warn-bg: var(--warning-bg);
  --warn-border: var(--warning-border);
  --warn-fg: var(--warning-fg);
  --warn: var(--warning-strong);
  --danger: var(--danger-strong);
  --danger-500: var(--danger-strong);
  --success-300: var(--success-fg);
  --success-400: var(--success-strong);
  --warning-300: var(--warning-fg);
  --warning-400: var(--warning-strong);
  --danger-300: var(--danger-fg);
  --danger-400: var(--danger-strong);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);

  /* ── Chart palette ────────────────────────────────────── */
  --chart-1: #6B72F5;
  --chart-2: #8B5CF6;
  --chart-3: #06B6D4;
  --chart-4: #10B981;
  --chart-5: #F59E0B;
  --chart-6: #EC4899;
  --chart-7: #64748B;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
  --shadow-xl: 0 24px 48px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.4);
  --shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.25);
  --shadow-inner: inset 0 1px 2px rgba(0,0,0,0.5);
}

[data-theme="light"] {
  --bg-base: #F7F8FA;
  --bg-sunken: #EEF0F4;
  --bg-raised: #FFFFFF;
  --bg-overlay: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-hover: #F1F3F7;
  --bg-active: #E8EBF1;
  --bg-inset: #F3F4F8;

  --border-subtle: #ECEEF3;
  --border-default: #DDE1E9;
  --border-strong: #C6CCD7;
  --border-focus: #4F46E5;

  --text-primary: #0F1320;
  --text-secondary: #475066;
  --text-tertiary: #6C7489;
  --text-disabled: #A9AEBD;
  --text-on-accent: #FFFFFF;

  --brand-glow: rgba(79, 70, 229, 0.20);

  --success-bg: rgba(16, 185, 129, 0.08);
  --success-border: rgba(16, 185, 129, 0.25);
  --success-fg: #059669;
  --success-strong: #047857;

  --warning-bg: rgba(245, 158, 11, 0.10);
  --warning-border: rgba(245, 158, 11, 0.28);
  --warning-fg: #B45309;
  --warning-strong: #92400E;

  --danger-bg: rgba(239, 68, 68, 0.08);
  --danger-border: rgba(239, 68, 68, 0.25);
  --danger-fg: #DC2626;
  --danger-strong: #B91C1C;

  --info-bg: rgba(59, 130, 246, 0.08);
  --info-border: rgba(59, 130, 246, 0.25);
  --info-fg: #2563EB;
  --info-strong: #1D4ED8;

  --shadow-xs: 0 1px 2px rgba(15, 19, 32, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 19, 32, 0.06), 0 1px 1px rgba(15, 19, 32, 0.04);
  --shadow-md: 0 4px 8px rgba(15, 19, 32, 0.06), 0 2px 4px rgba(15, 19, 32, 0.04);
  --shadow-lg: 0 12px 24px rgba(15, 19, 32, 0.08), 0 4px 8px rgba(15, 19, 32, 0.04);
  --shadow-xl: 0 24px 48px rgba(15, 19, 32, 0.12), 0 8px 16px rgba(15, 19, 32, 0.06);
  --shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.20);
  --shadow-inner: inset 0 1px 2px rgba(15, 19, 32, 0.06);
}

/* ── Radii / Spacing / Typography ──────────────────────── */
:root {
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 20px;
  --r-full: 999px;

  --s-0: 0;
  --s-1: 2px;
  --s-2: 4px;
  --s-3: 6px;
  --s-4: 8px;
  --s-5: 12px;
  --s-6: 16px;
  --s-7: 20px;
  --s-8: 24px;
  --s-9: 28px;
  --s-10: 32px;
  --s-12: 40px;
  --s-16: 56px;

  /* Inter Tight covers Latin; IBM Plex Sans Arabic provides the Arabic
     glyphs Inter Tight lacks. Browser per-glyph fallback resolves Arabic
     code points (U+0600–06FF, U+0750–077F, U+08A0–08FF, U+FB50–FDFF,
     U+FE70–FEFF) through to IBM Plex Sans Arabic without us having to
     swap the family on `<html dir="rtl">`. The family pair was picked
     for visual cohesion — both are geometric/humanist sans-serifs at
     similar x-height and weight progression. */
  --font-sans: "Inter Tight", "IBM Plex Sans Arabic", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-4xl: 36px;
  --fs-5xl: 48px;
  --fs-6xl: 64px;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: var(--dur-med);
  --dur-med: 200ms;
  --dur-slow: 320ms;

  --sidebar-w: 240px;
  --sidebar-w-collapsed: 60px;
  --topbar-h: 52px;
  --subbar-h: 44px;

  /* ── Breakpoints ───────────────────────────────────────
     Used in @media queries throughout shell.css + page CSS.
     Exposed as tokens for documentation only — CSS custom
     properties cannot be referenced from inside @media. */
  --bp-xs: 480px;   /* phones */
  --bp-sm: 640px;   /* large phones */
  --bp-md: 900px;   /* tablets */
  --bp-lg: 1100px;  /* small laptops */
  --bp-xl: 1400px;  /* desktops */
}