/**
 * Avinox Design Tokens - Layer 1 (Pure Foundation)
 * Single Source of Truth for Visual Design Tokens
 * Note: All values reflect current production design without visual alterations.
 */

:root {
  /* ========================================================
     1. Brand & Tenant Colors (RGB Channels & Pre-composed)
     ======================================================== */
  --primary-color: 15 74 93;           /* #0F4A5D */
  --primary-color-hex: #0F4A5D;
  --primary-color-dark: 62 127 89;     /* #3E7F59 */
  --primary-color-dark-hex: #3E7F59;
  --secondary-color: 73 123 143;       /* #497B8F */
  --secondary-color-hex: #497B8F;
  --accent-color: 242 164 102;         /* #F2A466 */
  --accent-color-hex: #F2A466;

  /* Brand Secondary / Accent target token */
  --brand-green: #02C897;
  --brand-green-rgb: 2 200 151;

  /* ========================================================
     2. Surface & Background Colors
     ======================================================== */
  --surface-color: 234 249 245;        /* #EAF9F5 (Current active surface) */
  --surface-color-hex: #EAF9F5;
  --surface-matte: #FFFFFF;
  --surface-matte-rgb: 255 255 255;
  --bg-color: #F4F8FA;
  --bg-color-rgb: 244 248 250;

  /* ========================================================
     3. Typography Colors
     ======================================================== */
  --text-title: #1B2B33;
  --text-title-rgb: 27 43 51;
  --text-secondary: #6B7C85;
  --text-secondary-rgb: 107 124 133;
  --black-color: #282828;
  --black-rgb: 40 40 40;
  --white-color: #ffffff;
  --white-rgb: 255 255 255;

  /* ========================================================
     4. Border & Divider Colors (Single Canonical Border)
     ======================================================== */
  --border-color: #E4EAED;
  --border-rgb: 228 234 237;

  /* ========================================================
     5. Status & Feedback Colors
     ======================================================== */
  --danger-color: #ef4444;
  --danger-rgb: 239 68 68;
  --info-color: #2590B8;
  --info-rgb: 37 144 184;
  --success-color: #41A375;
  --success-rgb: 65 163 117;
  --warning-color: #B88C49;
  --warning-rgb: 184 140 73;
  --error-color: #B84242;
  --error-rgb: 184 66 66;

  /* Semantic Container & State Tokens */
  --primary-container: #E0F2F7;
  --secondary-container: #D5FBF0;
  --warning-container: #FEF3C7;
  --warning-text: #B45309;
  --error-container: #FEE2E2;
  --surface-container-low: #E7F6FF;
  --surface-container-high: #D9EBF6;
  /* ========================================================
     6. Dynamic Pastel Colors (RGB channels for opacity /80)
     ======================================================== */
  --pblue-rgb: 219 228 231;
  --pblue-color: rgb(var(--pblue-rgb));
  --pyellow-rgb: 252 237 224;
  --pyellow-color: rgb(var(--pyellow-rgb));
  --pgreen-rgb: 226 236 230;
  --pgreen-color: rgb(var(--pgreen-rgb));
  --ppink-rgb: 228 235 238;
  --ppink-color: rgb(var(--ppink-rgb));

  /* ========================================================
     7. Elevation / Shadows (Three Tiers)
     ======================================================== */
  --elevation-base: 0 1px 3px 0 rgba(15, 74, 93, 0.05), 0 1px 2px -1px rgba(15, 74, 93, 0.05);
  --elevation-raised: 0 4px 20px -4px rgba(15, 74, 93, 0.06);
  --elevation-floating: 0 12px 32px -4px rgba(15, 23, 42, 0.12);

  /* ========================================================
     8. Glass Surface Tokens (Glassmorphism + Matte Fallback)
     ======================================================== */
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-blur: 14px;
  --glass-border: rgba(255, 255, 255, 0.90);
  --glass-shadow: var(--elevation-raised);
  --glass-fallback-bg: #FFFFFF;

  /* ========================================================
     9. Radius Scale
     ======================================================== */
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ========================================================
     10. Spacing Scale
     ======================================================== */
  --space-xs: 0.25rem;     /* 4px */
  --space-sm: 0.5rem;      /* 8px */
  --space-md: 1rem;        /* 16px */
  --space-lg: 1.5rem;      /* 24px */
  --space-xl: 2rem;        /* 32px */
  --gutter: 1.25rem;       /* 20px */
  --gutter-sm: 0.75rem;    /* 12px */
  --margin: 1.5rem;        /* 24px */
  --margin-mobile: 1rem;   /* 16px */

  /* Button Dimensions */
  --btn-h-sm: 24px;
  --btn-h-lg: 40px;
  --btn-h-xl: 44px;
  --btn-h-3xl: 56px;
  --btn-px-sm: 0.5rem;
  --btn-px-lg: 0.875rem;
  --btn-px-xl: 1rem;
  --btn-px-3xl: 1.25rem;

  /* ========================================================
     11. Typography Scale (Persian RTL Standard)
     ======================================================== */
  --font-family: 'IRANYekanXVF', system-ui, -apple-system, sans-serif;

  /* Headings */
  --text-headline-lg: 2rem;        /* 32px */
  --lh-headline-lg: 2.5rem;        /* 40px */
  --text-headline-md: 1.5rem;      /* 24px */
  --lh-headline-md: 2rem;          /* 32px */
  --text-headline-sm: 1.25rem;     /* 20px */
  --lh-headline-sm: 1.75rem;       /* 28px */

  /* Body & Labels */
  --text-title-md: 1rem;           /* 16px */
  --lh-title-md: 1.5rem;           /* 24px */
  --text-title-sm: 0.875rem;       /* 14px */
  --lh-title-sm: 1.25rem;          /* 20px */
  --text-body-md: 0.875rem;        /* 14px */
  --lh-body-md: 1.25rem;           /* 20px */
  --text-body-sm: 0.75rem;         /* 12px */
  --lh-body-sm: 1.125rem;          /* 18px */
  --text-label-sm: 0.6875rem;      /* 11px */
  --lh-label-sm: 0.875rem;         /* 14px */

  /* ========================================================
     12. Z-Index Layering Scale
     ======================================================== */
  --z-sticky: 50;
  --z-dropdown: 1000;
  --z-drawer: 1200;
  --z-modal: 1300;
  --z-toast: 1400;
  --z-tooltip: 1500;
}

/* Glass surface utility with pure CSS fallback & prefers-reduced-transparency */
.glass-surface {
  background-color: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

@supports not (backdrop-filter: blur(1px)) {
  .glass-surface {
    background-color: var(--glass-fallback-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass-surface {
    background-color: var(--glass-fallback-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ========================================================
   Avinox Custom Toggle Switch (Pure CSS & RTL/LTR-ready)
   ======================================================== */
.avinox-toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
}

.avinox-toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.avinox-toggle-track {
  width: 44px;
  height: 24px;
  background-color: #cbd5e1;
  border-radius: 9999px;
  position: relative;
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
  flex-shrink: 0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.avinox-toggle-thumb {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}

/* Active / Checked State */
.avinox-toggle-switch input[type="checkbox"]:checked + .avinox-toggle-track {
  background-color: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.32);
}

/* RTL translation (default in Avinox dir="rtl") */
.avinox-toggle-switch input[type="checkbox"]:checked + .avinox-toggle-track .avinox-toggle-thumb {
  transform: translateX(-20px);
}

/* Focus styles for keyboard navigation */
.avinox-toggle-switch input[type="checkbox"]:focus-visible + .avinox-toggle-track {
  outline: 2px solid #0f4a5d;
  outline-offset: 2px;
}

/* LTR compatibility */
[dir="ltr"] .avinox-toggle-switch .avinox-toggle-thumb {
  right: auto;
  left: 2px;
}
[dir="ltr"] .avinox-toggle-switch input[type="checkbox"]:checked + .avinox-toggle-track .avinox-toggle-thumb {
  transform: translateX(20px);
}

/* ========================================================
   Expandable Search Box Utilities (RTL/LTR-safe)
   ======================================================== */
.expandable-search-box #searchCloseBtn,
.expandable-search-box .search-close-btn {
  position: absolute !important;
  left: 10px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: #94a3b8 !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: all 0.2s ease !important;
}

.expandable-search-box #searchCloseBtn:hover,
.expandable-search-box .search-close-btn:hover {
  color: #334155 !important;
  background-color: rgba(0, 0, 0, 0.06) !important;
}

.expandable-search-box span.search-icon-indicator,
.expandable-search-box .search-icon-indicator {
  position: absolute !important;
  right: 12px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  pointer-events: none !important;
  color: #94a3b8 !important;
  z-index: 5 !important;
}

.expandable-search-box input[type="text"],
.expandable-search-box #searchInput {
  padding-left: 36px !important;
  padding-right: 36px !important;
}

/* ========================================================
   Action & Status Button Background Utilities
   ======================================================== */
.bg-sky-600 { background-color: #0284c7 !important; }
.hover\:bg-sky-700:hover { background-color: #0369a1 !important; }
.bg-amber-600 { background-color: #d97706 !important; }
.hover\:bg-amber-700:hover { background-color: #b45309 !important; }
.bg-emerald-600 { background-color: #059669 !important; }
.hover\:bg-emerald-700:hover { background-color: #047857 !important; }
.bg-teal-600 { background-color: #0d9488 !important; }
.hover\:bg-teal-700:hover { background-color: #0f766e !important; }
.bg-primary-color { background-color: #0f4a5d !important; }
.hover\:bg-primary-color:hover { background-color: #093340 !important; }