/* ==========================================================================
   Amaaly Systems - Design Tokens (token.css)
   Single Source of Truth: Colors, Typography, Sizing, Spacing, Layers.
   Load Order: token.css must load BEFORE style.css on every page.
   ========================================================================== */
:root {
    /* ======================================================================
       01. BRAND COLORS
       ====================================================================== */
    --color-brand-primary: #05445E;
    --color-primary-rgb: 5, 68, 94;
    --color-brand-primary-light: rgba(var(--color-primary-rgb), 0.15);
    --color-brand-secondary: #189AB4;
    --color-secondary-rgb: 24, 154, 180;
    --color-brand-secondary-light: rgba(var(--color-secondary-rgb), 0.25);
    --color-brand-cyan: #75E6DA;
    --color-brand-accent: #2C74B3;
    /* ======================================================================
       02. GRADIENTS
       ====================================================================== */
    --gradient-primary: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
    /* ======================================================================
       03. STATUS COLORS
       ====================================================================== */
    --color-success: #28a745;
    --color-success-rgb: 40, 167, 69;
    --color-success-hover: #218838;
    --color-success-bg: #d4edda;
    --color-danger: #dc3545;
    --color-danger-rgb: 220, 53, 69;
    --color-danger-hover: #c82333;
    --color-danger-bg: #f8d7da;
    --color-warning: #ffc107;
    --color-warning-bg: #fff3cd;
    --color-warning-border: #ffeeba;
    --color-info: #17a2b8;
    --color-info-bg: #d1ecf1;
    /* ======================================================================
       04. NEUTRAL COLORS
       ====================================================================== */
    --color-neutral-white: #ffffff;
    --color-neutral-black: #000000;
    --color-neutral-gray-50: #f8fafc;
    --color-neutral-gray-100: #f1f5f9;
    --color-neutral-gray-200: #e2e8f0;
    --color-neutral-gray-300: #cbd5e1;
    --color-neutral-gray-400: #94a3b8;
    --color-neutral-gray-500: #64748b;
    --color-neutral-gray-600: #475569;
    --color-neutral-gray-700: #334155;
    --color-neutral-gray-800: #1e293b;
    --color-neutral-gray-900: #0f172a;
    /* ======================================================================
       04b. UI ROLE COLORS (Semantic Mapping - Use These in Components)
       ====================================================================== */
    /* ---- Text Roles ---- */
    --text-default: var(--color-brand-primary);
    --text-secondary: var(--color-neutral-gray-600);
    --text-muted: var(--color-neutral-gray-500);
    --text-inverse: var(--color-neutral-white);
    /* ---- Surface Roles ---- */
    --surface-page: var(--color-neutral-gray-100);
    --surface-card: var(--color-neutral-white);
    --surface-muted: var(--color-neutral-gray-50);
    --surface-modal: var(--color-neutral-gray-100);
    /* ---- Border Roles ---- */
    --border-subtle: var(--color-neutral-gray-200);
    /* ---- Interactive Roles ---- */
    --color-action: var(--color-brand-primary);
    --color-action-hover: var(--color-brand-secondary);
    --color-link: var(--color-brand-accent);
    --color-link-hover: var(--color-brand-primary);
    /* ======================================================================
       05. TYPOGRAPHY
       ====================================================================== */
    /* ---- Font Families (Direction-Aware Base Resolved in RTL Block Below) ---- */
    --font-family-arabic: 'Tajawal';
    --font-family-english: 'Roboto';
    --font-family-base: var(--font-family-english), var(--font-family-arabic), sans-serif;
    /* ---- Font Size Scale ---- */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 0.95rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2rem;
    /* ---- Font Weights ---- */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    /* ---- Line Heights (Direction-Aware Base Resolved in RTL Block Below) ---- */
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;
    /* ---- Letter Spacing (Zeroed in RTL: Arabic Script Must Never Be Tracked) ---- */
    --letter-spacing-wide: 0.02em;
    /* ======================================================================
       06. SHADOWS
       ====================================================================== */
    --box-shadow-xs: 0 2px 4px rgba(0,0,0,0.05);
    --box-shadow-sm: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
    --box-shadow-md: 0 0.5rem 1rem rgba(0,0,0,0.15);
    --box-shadow-lg: 0 1rem 3rem rgba(0,0,0,0.175);
    --box-shadow-glow: 0 0 10px var(--color-brand-secondary-light);
    --box-shadow-brand: 0 4px 12px rgba(var(--color-primary-rgb), 0.12);
    --box-shadow-menu: 0 15px 35px rgba(var(--color-primary-rgb), 0.15);
    --box-shadow-focus: 0 0 0 3px var(--color-brand-primary-light);
    --box-shadow-focus-danger: 0 0 0 3px rgba(var(--color-danger-rgb), 0.25);
    --box-shadow-focus-success: 0 0 0 3px rgba(var(--color-success-rgb), 0.25);
    /* ======================================================================
       07. BORDERS & RADIUS
       ====================================================================== */
    /* ---- Radius Primitives (Raw Scale - Do Not Use Directly in Components) ---- */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 1rem;
    --border-radius-pill: 50rem;
    --border-radius-circle: 50%;
    /* ---- Radius Semantic (Component Mapping - Use These in All Components) ---- */
    --radius-control: var(--border-radius-md);
    --radius-control-sm: var(--border-radius-sm);
    --radius-menu: var(--border-radius-md);
    --radius-surface: var(--border-radius-lg);
    /* ---- Semantic Radius (Component Roles) ---- */
    --radius-control: var(--border-radius-md);
    --radius-control-sm: var(--border-radius-sm);
    --radius-menu: var(--border-radius-md);
    --radius-surface: var(--border-radius-lg);
    --border-width: 1px;
    --border-width-md: 2px;
    --border-width-thick: 3px;
    --color-border: var(--color-neutral-gray-300);
    /* ======================================================================
       08. DIMENSIONS & SIZING
       ====================================================================== */
    --sidebar-width: 260px;
    --header-height: 70px;
    --page-header-height: 85px;
    --input-height: 40px;
    --input-height-md: var(--input-height);
    --input-height-lg: 60px;
    --input-height-sm: 35px;
    --avatar-size-sm: 40px;
    --avatar-size-lg: 56px;
    --fab-size: 45px;
    --scrollbar-width: 6px;
    /* ---- Component Dimensions ---- */
    --btn-min-width: 90px;
    --control-icon-zone: 2.5rem;
    --step-circle-size: var(--input-height);
    --switch-width: var(--input-height);
    --switch-height: 20px;
    --switch-knob-size: 15px;
    --switch-knob-offset: 3px;
    --sidebar-indent: 2.5rem;
    --menu-max-height: 250px;
    --dropdown-width: 320px;
    --dropdown-max-width: 350px;
    /* ======================================================================
       09. SPACING
       ====================================================================== */
    /* ---- Spacing Primitives (4px Base Scale - Sequential) ---- */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-ms: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 2.5rem;
    --spacing-3xl: 3rem;
    /* ---- Spacing Semantic (Component Mapping - Use These in Components) ---- */
    --space-field: var(--spacing-lg);
    --space-card: var(--spacing-lg);
    --space-stack: var(--spacing-md);
    --space-gap: var(--spacing-md);
    --space-gap-sm: var(--spacing-sm);
    /* ======================================================================
       10. TABLE COMPONENT
       ====================================================================== */
    --table-header-height: 48px;
    --table-col-text-min: 220px;
    --table-col-text-max: 280px;
    --table-shadow-size: 6px;
    --spacing-td-y: 0.85rem;
    --spacing-td-header-y: 1.15rem;
    --input-min-width-table: 110px;
    --color-table-highlight: rgba(0, 0, 0, 0.02);
    --color-table-highlight-hover: rgba(0, 0, 0, 0.04);
    --color-shadow-sticky-start: rgba(var(--color-primary-rgb), 0.08);
    --color-shadow-sticky-end: rgba(var(--color-primary-rgb), 0);
    /* ======================================================================
       11. TRANSITIONS
       ====================================================================== */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    /* ======================================================================
       12. Z-INDEX LAYERS
       ====================================================================== */
    --z-index-sticky: 10;
    --z-index-sticky-elevated: 20;
    --z-index-header: 99;
    --z-index-nav: 100;
    --z-index-sidebar: 110;
    --z-index-dropdown: 999;
    --z-index-modal-bg: 1999;
    --z-index-spinner: 2000;
    --z-index-fab: 2010;
    /* ======================================================================
       13. TOAST & NOTIFICATION
       ====================================================================== */
    --toast-width: 350px;
}

/* ==========================================================================
   DIRECTION-AWARE TOKEN OVERRIDES (RTL)
   Arabic (Tajawal): Family-First Swap, Taller Line Rhythm, Zero Tracking.
   ========================================================================== */
[dir="rtl"] {
    --font-family-base: var(--font-family-arabic), var(--font-family-english), sans-serif;
    --line-height-base: 1.65;
    --letter-spacing-wide: 0;
}