/**
 * Spark Design System Variables
 * Centralized design tokens for consistent styling across the application
 * Author: BENHENNI Mehdi
 */

@font-face {
   font-family: 'Garet';
   src: url("../../fonts/Garet-Book.6aea6bc41f90.ttf") format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

:root {
   /* ============================================
       ONA BRAND COLORS (Primary Source of Truth)
       ============================================ */
   --ona-primary: #0078d4;
   /* Microsoft Blue */
   --ona-primary-hover: #106ebe;
   --ona-primary-active: #005a9e;
   --ona-primary-light: #deecf9;
   --ona-primary-lighter: #eff6ff;

   --ona-success: #107c10;
   --ona-success-light: #dff6dd;
   --ona-success-hover: #0e6b0e;

   --ona-warning: #ffb900;
   --ona-warning-light: #fff4ce;
   --ona-warning-dark: #8a6d00;

   --ona-danger: #d13438;
   --ona-danger-light: #fef2f2;
   --ona-danger-hover: #a72b2e;

   --ona-info: #0078d4;
   --ona-info-light: #eff6ff;

   /* Semantic Aliases for Bridge */
   --ona-text: var(--color-text-primary);
   --ona-text-secondary: var(--color-text-secondary);
   --ona-text-light: var(--color-text-tertiary);
   --ona-text-muted: var(--color-text-disabled);
   --ona-bg: var(--color-bg-secondary);
   --ona-surface: var(--color-bg-primary);
   --ona-border: var(--color-border-light);
   --ona-border-light: var(--color-bg-tertiary);
   --ona-border-hover: var(--color-border-medium);
   --ona-radius: var(--radius-md);
   --ona-radius-sm: var(--radius-sm);
   --ona-radius-lg: var(--radius-lg);
   --ona-radius-none: var(--radius-none);
   --ona-radius-pill: var(--radius-full);


   /* ============================================
       GENERIC DESIGN TOKENS (Mapping to ONA Brand)
       ============================================ */
   --color-primary: var(--ona-primary);
   --color-primary-light: var(--ona-primary-light);
   --color-primary-dark: var(--ona-primary-hover);
   --color-primary-darker: var(--ona-primary-active);

   /* Secondary Colors */
   --color-secondary: #2181c3;
   --color-secondary-light: #3a95d6;
   --color-secondary-dark: #1a6a9e;

   /* Accent Colors */
   --color-accent: #95c11f;
   --color-accent-light: #a8d132;
   --color-accent-dark: #7a9e19;

   /* State Colors */
   --color-success: var(--ona-success);
   --color-success-light: var(--ona-success-light);
   --color-success-dark: var(--ona-success-hover);

   --color-danger: var(--ona-danger);
   --color-danger-light: var(--ona-danger-light);
   --color-danger-dark: var(--ona-danger-hover);

   --color-warning: var(--ona-warning);
   --color-warning-light: var(--ona-warning-light);
   --color-warning-dark: var(--ona-warning-dark);

   --color-info: var(--ona-info);
   --color-info-light: var(--ona-info-light);
   --color-info-dark: #0aa2c0;

   /* ============================================
       LEGACY SPARK TOKENS (For Backward Compatibility)
       ============================================ */
   --spark-primary: var(--ona-primary);
   --spark-secondary: var(--color-secondary);
   --spark-dark: #2b2d42;
   --spark-light: #c5e2ff7c;
   --spark-accent: var(--color-accent);
   --spark-success: var(--ona-success);
   --spark-warning: var(--ona-warning);
   --spark-danger: var(--ona-danger);
   --spark-surface: #ffffff;
   --spark-border: #edebe9;
   --spark-text: #201f1e;

   /* Neutral Palette */
   --color-white: #ffffff;
   --color-black: #000000;

   --color-gray-50: #f8fafc;
   --color-gray-100: #f1f5f9;
   --color-gray-200: #e2e8f0;
   --color-gray-300: #cbd5e1;
   --color-gray-400: #94a3b8;
   --color-gray-500: #64748b;
   --color-gray-600: #475569;
   --color-gray-700: #334155;
   --color-gray-800: #1e293b;
   --color-gray-900: #0f172a;

   /* Text Colors */
   --color-text-primary: #0f172a;
   --color-text-secondary: #475569;
   --color-text-tertiary: #94a3b8;
   --color-text-disabled: #cbd5e1;
   --color-text-inverse: #ffffff;

   /* Background Colors */
   --color-bg-primary: #ffffff;
   --color-bg-secondary: #f8fafc;
   --color-bg-tertiary: #f1f5f9;
   --color-bg-overlay: rgba(15, 23, 42, 0.5);

   /* Border Colors */
   --color-border-light: #e2e8f0;
   --color-border-medium: #cbd5e1;
   --color-border-dark: #94a3b8;

   /* ============================================
       SPACING SYSTEM (4px base unit)
       ============================================ */

   --spacing-0: 0;
   --spacing-1: 0.25rem;
   /* 4px */
   --spacing-2: 0.5rem;
   /* 8px */
   --spacing-3: 0.75rem;
   /* 12px */
   --spacing-4: 1rem;
   /* 16px */
   --spacing-5: 1.25rem;
   /* 20px */
   --spacing-6: 1.5rem;
   /* 24px */
   --spacing-8: 2rem;
   /* 32px */
   --spacing-10: 2.5rem;
   /* 40px */
   --spacing-12: 3rem;
   /* 48px */
   --spacing-16: 4rem;
   /* 64px */
   --spacing-20: 5rem;
   /* 80px */
   --spacing-24: 6rem;
   /* 96px */

   /* Semantic Spacing */
   --spacing-xs: var(--spacing-1);
   --spacing-sm: var(--spacing-2);
   --spacing-md: var(--spacing-4);
   --spacing-lg: var(--spacing-6);
   --spacing-xl: var(--spacing-8);
   --spacing-2xl: var(--spacing-12);
   --spacing-3xl: var(--spacing-16);

   /* ============================================
       TYPOGRAPHY
       ============================================ */

   /* Font Families */
   --font-primary:
      "Garet", "Outfit", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-secondary:
      "Garet", "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --font-mono: "Courier New", Courier, monospace;

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

   /* Line Heights */
   --line-height-none: 1;
   --line-height-tight: 1.25;
   --line-height-snug: 1.375;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.625;
   --line-height-loose: 2;

   /* Font Weights */
   --font-weight-light: 300;
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 600;
   --font-weight-extrabold: 700;

   /* Letter Spacing */
   --letter-spacing-tighter: -0.05em;
   --letter-spacing-tight: -0.025em;
   --letter-spacing-normal: 0;
   --letter-spacing-wide: 0.025em;
   --letter-spacing-wider: 0.05em;
   --letter-spacing-widest: 0.1em;

   /* ============================================
       BORDER RADIUS
       ============================================ */

   --radius-none: 0;
   --radius-xs: 0.125rem;
   /* 2px */
   --radius-sm: 0.25rem;
   /* 4px */
   --radius-md: 0.375rem;
   /* 6px */
   --radius-lg: 0.5rem;
   /* 8px */
   --radius-xl: 0.625rem;
   /* 10px */
   --radius-2xl: 1.125rem;
   /* 18px */
   --radius-3xl: 1.5rem;
   /* 24px */
   --radius-full: 9999px;

   /* ============================================
       SHADOWS
       ============================================ */

   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
   --shadow-xl:
      0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
   --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
   --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
   --shadow-none: none;

   /* Colored Shadows */
   --shadow-primary: 0 4px 14px rgba(53, 110, 231, 0.25);
   --shadow-success: 0 4px 14px rgba(32, 201, 151, 0.25);
   --shadow-danger: 0 4px 14px rgba(220, 53, 69, 0.25);
   --shadow-warning: 0 4px 14px rgba(255, 193, 7, 0.25);

   /* ============================================
       TRANSITIONS & ANIMATIONS
       ============================================ */

   /* Transition Durations */
   --duration-fast: 150ms;
   --duration-base: 300ms;
   --duration-slow: 500ms;
   --duration-slower: 700ms;

   /* Transition Timing Functions */
   --ease-linear: linear;
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

   /* Combined Transitions */
   --transition-fast: all var(--duration-fast) var(--ease-out);
   --transition-base: all var(--duration-base) var(--ease-in-out);
   --transition-slow: all var(--duration-slow) var(--ease-in-out);

   /* Specific Transitions */
   --transition-colors:
      color var(--duration-base) var(--ease-in-out),
      background-color var(--duration-base) var(--ease-in-out),
      border-color var(--duration-base) var(--ease-in-out);
   --transition-transform: transform var(--duration-base) var(--ease-out);
   --transition-opacity: opacity var(--duration-base) var(--ease-in-out);
   --transition-shadow: box-shadow var(--duration-base) var(--ease-in-out);

   /* ============================================
       Z-INDEX SCALE
       ============================================ */

   --z-base: 0;
   --z-dropdown: 1000;
   --z-sticky: 1020;
   --z-fixed: 1030;
   --z-modal-backdrop: 1040;
   --z-modal: 1050;
   --z-popover: 1060;
   --z-tooltip: 1070;
   --z-notification: 1080;

   /* ============================================
       COMPONENT HEIGHTS
       ============================================ */
   --height-control: 40px;
   --height-control-sm: 32px;
   --height-control-lg: 44px;
   --height-navbar: 60px;

   /* ============================================
       BREAKPOINTS (for JS and Media Queries)
       ============================================ */
   --breakpoint-mobile: 768px;
   --breakpoint-tablet: 1024px;
   --breakpoint-desktop: 1200px;
   --breakpoint-wide: 1440px;

   /* ============================================
       STATUS COLORS (Semantic Badges)
       ============================================ */
   --status-pending: #ffb900;
   --status-pending-bg: #fff4ce;
   --status-approved: #107c10;
   --status-approved-bg: #dff6dd;
   --status-rejected: #d13438;
   --status-rejected-bg: #fef2f2;
   --status-draft: #8a8886;
   --status-draft-bg: #f3f2f1;
   --status-locked: #605e5c;
   --status-locked-bg: #edebe9;
   --status-active: #107c10;
   --status-active-bg: #dff6dd;
   --status-inactive: #8a8886;
   --status-inactive-bg: #f3f2f1;

   /* ============================================
       BREAKPOINTS (for JS usage)
       ============================================ */

   --breakpoint-xs: 0px;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;
   --breakpoint-2xl: 1400px;

   /* ============================================
       CONTAINER SIZES
       ============================================ */

   --container-xs: 540px;
   --container-sm: 720px;
   --container-md: 960px;
   --container-lg: 1140px;
   --container-xl: 1320px;

   /* ============================================
       COMPONENT-SPECIFIC VARIABLES
       ============================================ */

   /* Navbar */
   --navbar-height: 64px;
   --navbar-bg: var(--color-primary);
   --navbar-bg-secondary: var(--color-primary-dark);
   --navbar-text: var(--color-white);
   --navbar-padding: var(--spacing-4);

   /* Buttons */
   --btn-padding-x: var(--spacing-4);
   --btn-padding-y: var(--spacing-2);
   --btn-font-size: var(--font-size-base);
   --btn-border-radius: var(--radius-md);
   --btn-transition: var(--transition-base);

   /* Forms */
   --input-height: 2.5rem;
   --input-padding-x: var(--spacing-3);
   --input-padding-y: var(--spacing-2);
   --input-border-width: 1px;
   --input-border-color: var(--color-border-medium);
   --input-border-radius: var(--radius-md);
   --input-focus-border-color: var(--color-primary);
   --input-bg: var(--color-white);

   /* Cards */
   --card-padding: var(--spacing-6);
   --card-border-radius: var(--radius-md);
   --card-bg: var(--color-white);
   --card-shadow: var(--shadow-sm);
   --card-hover-shadow: var(--shadow-md);

   /* Tables */
   --table-cell-padding: var(--spacing-3);
   --table-border-color: var(--color-border-light);
   --table-hover-bg: var(--color-gray-50);
   --table-striped-bg: var(--color-gray-50);

   /* Modals */
   --modal-backdrop-bg: rgba(15, 23, 42, 0.7);
   --modal-border-radius: var(--radius-md);
   --modal-padding: var(--spacing-6);
   --modal-shadow: var(--shadow-2xl);

   /* Notifications/Toasts */
   --toast-width: 360px;
   --toast-padding: var(--spacing-4);
   --toast-border-radius: var(--radius-md);
   --toast-shadow: var(--shadow-lg);

   /* ============================================
       LAYOUT VARIABLES
       ============================================ */

   --header-height: 64px;
   --footer-height: 60px;
   --sidebar-width: 260px;
   --sidebar-collapsed-width: 70px;

   /* Content Spacing */
   --content-padding: var(--spacing-6);
   --content-max-width: 1400px;

   /* ============================================
       ACCESSIBILITY
       ============================================ */

   --focus-ring-width: 3px;
   --focus-ring-color: rgba(53, 110, 231, 0.25);
   --focus-ring-offset: 2px;

   /* ============================================
       EFFECTS
       ============================================ */

   /* Backdrop Blur */
   --blur-sm: blur(4px);
   --blur-md: blur(8px);
   --blur-lg: blur(16px);
   --blur-xl: blur(24px);

   /* Opacity */
   --opacity-0: 0;
   --opacity-5: 0.05;
   --opacity-10: 0.1;
   --opacity-20: 0.2;
   --opacity-30: 0.3;
   --opacity-40: 0.4;
   --opacity-50: 0.5;
   --opacity-60: 0.6;
   --opacity-70: 0.7;
   --opacity-80: 0.8;
   --opacity-90: 0.9;
   --opacity-100: 1;
}

/* ============================================
   DARK MODE SUPPORT (Future Enhancement)
   ============================================ */

/* Dark mode support removed by request - forcing light mode */


/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
   :root {
      /* Optimize for printing */
      --shadow-sm: none;
      --shadow-md: none;
      --shadow-lg: none;
      --shadow-xl: none;
      --shadow-2xl: none;
   }
}

/* ============================================
   ONA UTILITY BRIDGE
   ============================================ */
.bg-primary {
   background-color: var(--ona-primary) !important;
}

.bg-success {
   background-color: var(--ona-success) !important;
}

.bg-warning {
   background-color: var(--ona-warning) !important;
}

.bg-danger {
   background-color: var(--ona-danger) !important;
}

.bg-surface {
   background-color: var(--ona-surface) !important;
}

.bg-page {
   background-color: var(--ona-bg) !important;
}

.text-primary {
   color: var(--ona-primary) !important;
}

.text-success {
   color: var(--ona-success) !important;
}

.text-warning {
   color: var(--ona-warning-dark) !important;
}

.text-danger {
   color: var(--ona-danger) !important;
}

.text-secondary {
   color: var(--ona-text-secondary) !important;
}

.text-muted {
   color: var(--ona-text-light) !important;
}

.border-primary {
   border-color: var(--ona-primary) !important;
}

.border-success {
   border-color: var(--ona-success) !important;
}

.border-warning {
   border-color: var(--ona-warning) !important;
}

.border-danger {
   border-color: var(--ona-danger) !important;
}

.border-default {
   border-color: var(--ona-border) !important;
}

.font-regular {
   font-weight: var(--ona-font-regular, 400) !important;
}

.font-medium {
   font-weight: var(--ona-font-medium, 500) !important;
}

.font-semibold {
   font-weight: var(--ona-font-semibold, 600) !important;
}

.font-bold {
   font-weight: var(--ona-font-bold, 700) !important;
}

.rounded-sm {
   border-radius: var(--ona-radius-sm, 2px) !important;
}

.rounded {
   border-radius: var(--ona-radius, 4px) !important;
}

.rounded-md {
   border-radius: var(--ona-radius-md, 6px) !important;
}

.rounded-lg {
   border-radius: var(--ona-radius-lg, 8px) !important;
}

.rounded-pill {
   border-radius: var(--ona-radius-pill, 20px) !important;
}

.rounded-circle {
   border-radius: var(--ona-radius-circle, 50%) !important;
}