/* ==========================================================================
   ERP V2.0 — DUBAI EDITION (DLD · RERA · OQOOD · SPA · FTA)
   Design System & Theme Tokens (QuickBooks Online Layout Pattern)
   Client-Specified Raw Palette & Enterprise Gradients
   ========================================================================== */

:root {
  /* ===== 1. RAW CLIENT PALETTE (HEX ONLY) ===== */
  --p-black: #000000;
  --p-white: #FFFFFF;
  --p-gray-200: #E5E7EB;
  --p-warm-100: #EFEEEC;
  --p-gray-500: #707070;
  --p-gray-400: #888888;
  --p-ink-950: #020617;
  --p-ink-900: #0E1012;
  --p-ink-850: #111212;
  --p-ink-800: #171717;
  --p-navy-800: #1E3A8A;
  --p-teal-700: #0E7490;
  --p-green-800: #065F46;
  --p-amber-800: #92400E;
  --p-violet-800: #5B21B6;
  --p-rose-700: #BE185D;
  --p-sky-300: #57B7DE;
  --p-sky-400: #42A8D1;
  --p-sky-500: #21A1DB;
  --p-sky-700: #136C91;
  --p-mint-200: #A0F7D4;
  --p-mint-250: #9EF0D0;
  --p-mint-400: #72E1BA;

  /* Alpha Steps */
  --a-w-04: rgba(255, 255, 255, 0.04);
  --a-w-05: rgba(255, 255, 255, 0.05);
  --a-w-08: rgba(255, 255, 255, 0.08);
  --a-w-10: rgba(255, 255, 255, 0.10);
  --a-w-15: rgba(255, 255, 255, 0.15);
  --a-w-20: rgba(255, 255, 255, 0.20);
  --a-w-25: rgba(255, 255, 255, 0.25);
  --a-w-30: rgba(255, 255, 255, 0.30);
  --a-w-40: rgba(255, 255, 255, 0.40);
  --a-w-45: rgba(255, 255, 255, 0.45);
  --a-w-50: rgba(255, 255, 255, 0.50);
  --a-w-60: rgba(255, 255, 255, 0.60);
  --a-w-70: rgba(255, 255, 255, 0.70);
  --a-w-75: rgba(255, 255, 255, 0.75);
  --a-w-80: rgba(255, 255, 255, 0.80);
  --a-w-90: rgba(255, 255, 255, 0.90);
  --a-w-95: rgba(255, 255, 255, 0.95);

  --a-b-04: rgba(0, 0, 0, 0.04);
  --a-b-05: rgba(0, 0, 0, 0.05);
  --a-b-07: rgba(0, 0, 0, 0.07);
  --a-b-10: rgba(0, 0, 0, 0.10);
  --a-b-25: rgba(0, 0, 0, 0.25);
  --a-b-40: rgba(0, 0, 0, 0.40);
  --a-b-65: rgba(0, 0, 0, 0.65);

  --a-ink-50: rgba(17, 18, 18, 0.50);
  --a-ink-60: rgba(17, 18, 18, 0.60);
  --a-sky-15: rgba(87, 183, 222, 0.15);
  --a-sky-30: rgba(87, 183, 222, 0.30);

  /* ===== 2. SEMANTIC DESIGN TOKENS ===== */
  --color-primary: #136C91;             /* Calm enterprise teal-blue */
  --color-primary-hover: #0E7490;
  --color-primary-bright: #21A1DB;
  --color-primary-soft: rgba(87, 183, 222, 0.15);
  --color-primary-soft-strong: rgba(87, 183, 222, 0.30);

  --color-secondary: #1E3A8A;           /* Deep corporate navy */
  --color-accent: #C8932F;              /* Prestige real-estate gold */
  --color-accent-hover: #B07F24;
  --color-accent-soft: #FCF6EC;

  --color-info: #0E7490;
  --color-info-hover: #136C91;
  --color-info-soft: rgba(14, 116, 144, 0.12);

  --color-success: #065F46;             /* UAE regulatory green */
  --color-success-hover: #044331;
  --color-success-soft: rgba(160, 247, 212, 0.25);
  --color-success-bright: #72E1BA;

  --color-warning: #92400E;             /* Amber alert */
  --color-warning-hover: #78350F;
  --color-warning-soft: rgba(146, 64, 14, 0.12);

  --color-danger: #BE185D;              /* Rose alert */
  --color-danger-hover: #9D174D;
  --color-danger-soft: rgba(190, 24, 93, 0.12);

  --color-special: #5B21B6;             /* Violet */
  --color-special-soft: rgba(91, 33, 182, 0.12);

  --color-neutral: #707070;
  --color-neutral-soft: #E5E7EB;

  /* Surfaces & Canvas */
  --color-bg: #EFEEEC;                  /* Modern warm light-grey page canvas */
  --color-surface: #FFFFFF;
  --color-surface-alt: #F8FAFC;
  --color-surface-hover: #F1F5F9;
  --color-border: #E5E7EB;
  --color-border-strong: #888888;
  --color-border-focus: #136C91;
  --color-overlay: rgba(17, 18, 18, 0.55);
  --color-scrollbar: #CBD5E1;

  /* Text Hierarchy */
  --color-text: #111212;
  --color-text-muted: #707070;
  --color-text-subtle: #888888;
  --color-text-inverse: #FFFFFF;

  /* ===== 3. CLOSED RAIL SIDEBAR & FLYOUT (QUICKBOOKS ONLINE PATTERN) ===== */
  --sidebar-width: 72px;                /* CLOSED 72px RAIL LAYOUT AS REQUESTED */
  --sidebar-collapsed: 72px;
  --sidebar-expanded: 248px;
  --sidebar-bg: #111212;                /* Deep ink-charcoal rail background */
  --sidebar-bg-alt: #0E1012;
  --sidebar-text: rgba(255, 255, 255, 0.70);
  --sidebar-text-muted: rgba(255, 255, 255, 0.45);
  --sidebar-text-active: #FFFFFF;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --sidebar-active-bg: rgba(87, 183, 222, 0.18);
  --sidebar-accent: #57B7DE;

  /* Topbar */
  --topbar-height: 60px;
  --topbar-bg: #FFFFFF;
  --topbar-border: #E5E7EB;

  /* Multi-Column Mega-Flyout Panel */
  --flyout-width: 860px;
  --flyout-bg: #FFFFFF;
  --flyout-border: #E5E7EB;
  --flyout-header-bg: #FFFFFF;
  --flyout-pill-active-bg: rgba(87, 183, 222, 0.15);
  --flyout-pill-active-color: #136C91;

  /* Tables */
  --table-head-bg: #F4F6F8;
  --table-head-text: #111212;
  --table-row-hover: #F8FAFC;
  --table-stripe: #FAFBFC;
  --table-border: #E5E7EB;

  /* Typography */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, Consolas, "Liberation Mono", Menlo, monospace;
  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.8125rem;   /* 13px */
  --fs-md: 0.875rem;    /* 14px */
  --fs-base: 0.9375rem; /* 15px */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.375rem;    /* 22px */
  --fs-2xl: 1.75rem;    /* 28px */
  --fs-kpi: 1.875rem;   /* 30px */

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

  --lh-tight: 1.25;
  --lh-base: 1.5;
  --lh-relaxed: 1.65;

  /* Spacing Scale (4px base) */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-7: 2rem;     /* 32px */
  --space-8: 2.5rem;   /* 40px */
  --space-9: 3rem;     /* 48px */

  /* Shape & Elevation */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.16);
  --shadow-flyout: 0 24px 60px rgba(0, 0, 0, 0.22);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-focus: 0 0 0 3px rgba(87, 183, 222, 0.35);
  --shadow-danger-focus: 0 0 0 3px rgba(190, 24, 93, 0.30);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #020617 0%, #1E3A8A 50%, #136C91 100%);
  --gradient-primary: linear-gradient(135deg, #136C91 0%, #21A1DB 100%);
  --gradient-accent: linear-gradient(135deg, #57B7DE 0%, #72E1BA 100%);

  --transition: 0.18s ease;
  --transition-slow: 0.28s ease;

  /* Z-Index Ladder */
  --z-rail: 100;
  --z-sidebar: 100;
  --z-flyout: 105;
  --z-topbar: 110;
  --z-sticky: 150;
  --z-dropdown: 200;
  --z-drawer: 250;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;
}

/* ==========================================================================
   DARK THEME OVERRIDES
   ========================================================================== */
[data-theme="dark"] {
  --color-primary: #21A1DB;
  --color-primary-hover: #57B7DE;
  --color-primary-soft: rgba(33, 161, 219, 0.18);
  --color-accent: #E0A738;
  --color-accent-hover: #F2BA4C;
  --color-accent-soft: rgba(224, 167, 56, 0.15);

  --color-success: #72E1BA;
  --color-success-hover: #A0F7D4;
  --color-success-soft: rgba(114, 225, 186, 0.15);
  --color-warning: #FAB026;
  --color-warning-hover: #FCD34D;
  --color-warning-soft: rgba(250, 176, 38, 0.15);
  --color-danger: #F43F5E;
  --color-danger-hover: #FB7185;
  --color-danger-soft: rgba(244, 63, 94, 0.15);
  --color-info: #57B7DE;
  --color-info-hover: #93C5FD;
  --color-info-soft: rgba(87, 183, 222, 0.15);
  --color-neutral: #888888;
  --color-neutral-soft: #262626;

  --color-bg: #0E1012;
  --color-surface: #171717;
  --color-surface-alt: #1F1F1F;
  --color-surface-hover: #262626;
  --color-border: #2A2A2A;
  --color-border-strong: #404040;
  --color-border-focus: #21A1DB;
  --color-overlay: rgba(0, 0, 0, 0.75);
  --color-scrollbar: #404040;

  --color-text: #FFFFFF;
  --color-text-muted: #888888;
  --color-text-subtle: #707070;
  --color-text-inverse: #0E1012;

  --sidebar-bg: #0E1012;
  --sidebar-bg-alt: #020617;
  --sidebar-text: rgba(255, 255, 255, 0.75);
  --sidebar-text-muted: rgba(255, 255, 255, 0.45);
  --sidebar-active-bg: rgba(33, 161, 219, 0.20);
  --sidebar-active-text: #FFFFFF;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --sidebar-accent: #21A1DB;
  --topbar-bg: #171717;
  --topbar-border: #2A2A2A;

  --flyout-bg: #171717;
  --flyout-border: #2A2A2A;
  --flyout-header-bg: #171717;
  --flyout-pill-active-bg: rgba(33, 161, 219, 0.20);
  --flyout-pill-active-color: #57B7DE;

  --table-head-bg: #1F1F1F;
  --table-head-text: #FFFFFF;
  --table-row-hover: #242424;
  --table-stripe: #1B1B1B;
  --table-border: #2A2A2A;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65);
  --shadow-flyout: 0 24px 60px rgba(0, 0, 0, 0.85);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-focus: 0 0 0 3px rgba(33, 161, 219, 0.40);
  --shadow-danger-focus: 0 0 0 3px rgba(244, 63, 94, 0.35);
}