/**
 * Efes Vitanta Employee Hub — Design System
 * ==========================================
 * Standalone CSS custom properties file. No build step required.
 * Load via: <link rel="stylesheet" href="/assets/css/design-system.css">
 *
 * Brand: Efes blue #003DA5, Efes gold #F2A900
 * Dark mode: apply class "dark" on <html> element
 * WCAG 2.1 AA: all text-on-background combos >= 4.5:1 contrast ratio
 */

/* ==========================================================================
   1. LIGHT MODE (default) — CSS Custom Properties
   ========================================================================== */

:root {
   /* -----------------------------------------------------------------------
      Anadolu Efes Corporate Color Variables
      ----------------------------------------------------------------------- */
   --efes-navy: #001642;
   --efes-navy-dark: #000F2E;
   --efes-gold: #F2A900;
   --efes-gold-light: #F5B81A;
   --efes-bg: #F8FAFC;

   /* -----------------------------------------------------------------------
     Primary Palette — Efes Blue (#003DA5)
     6 shades: lightest (50) to darkest (900)
     ----------------------------------------------------------------------- */
   --color-primary-50: #E6EDF8;
   --color-primary-100: #B3CCE9;
   --color-primary-200: #809BD5;
   --color-primary-300: #4D6AC0;
   --color-primary-400: #1A4FB2;
   --color-primary-500: #003DA5;
   /* Base brand blue */
   --color-primary-600: #003189;
   --color-primary-700: #00266D;
   --color-primary-800: #001B51;
   --color-primary-900: #001035;

   /* -----------------------------------------------------------------------
     Secondary Palette — Efes Gold (#F2A900)
     6 shades: lightest (50) to darkest (900)
     ----------------------------------------------------------------------- */
   --color-secondary-50: #FEF7E6;
   --color-secondary-100: #FDE9B3;
   --color-secondary-200: #FBDB80;
   --color-secondary-300: #F9CD4D;
   --color-secondary-400: #F5B81A;
   --color-secondary-500: #F2A900;
   /* Base brand gold */
   --color-secondary-600: #C98D00;
   --color-secondary-700: #A07000;
   --color-secondary-800: #775400;
   --color-secondary-900: #4E3700;

   /* -----------------------------------------------------------------------
     Neutral Scale — 8 shades (slate-based)
     ----------------------------------------------------------------------- */
   --color-neutral-50: #F8FAFC;
   --color-neutral-100: #F1F5F9;
   --color-neutral-200: #E2E8F0;
   --color-neutral-300: #CBD5E1;
   --color-neutral-400: #94A3B8;
   --color-neutral-500: #64748B;
   --color-neutral-600: #475569;
   --color-neutral-700: #334155;
   --color-neutral-800: #1E293B;

   /* -----------------------------------------------------------------------
     Semantic Colors
     ----------------------------------------------------------------------- */
   --color-success: #16A34A;
   --color-success-bg: #F0FDF4;
   --color-success-border: #BBF7D0;

   --color-warning: #CA8A04;
   --color-warning-bg: #FEFCE8;
   --color-warning-border: #FEF08A;

   --color-error: #DC2626;
   --color-error-bg: #FEF2F2;
   --color-error-border: #FECACA;

   --color-info: #2563EB;
   --color-info-bg: #EFF6FF;
   --color-info-border: #BFDBFE;

   /* -----------------------------------------------------------------------
     Functional Tokens (composed from palette)
     ----------------------------------------------------------------------- */
   --color-bg: var(--color-neutral-50);
   --color-surface: #FFFFFF;
   --color-surface-elevated: #FFFFFF;
   --color-border: var(--color-neutral-200);
   --color-border-strong: var(--color-neutral-300);

   --color-text: var(--color-neutral-800);
   /* Primary text — 13.5:1 on white */
   --color-text-secondary: var(--color-neutral-600);
   /* 5.7:1 on white */
   --color-text-muted: var(--color-neutral-500);
   /* 4.6:1 on white — AA pass */
   --color-text-inverse: #FFFFFF;

   --color-link: var(--color-primary-500);
   --color-link-hover: var(--color-primary-600);

   --color-focus-ring: var(--color-primary-200);

   /* -----------------------------------------------------------------------
     Typography Scale — 6 sizes (xs to 3xl)
     Line heights tuned for readability
     ----------------------------------------------------------------------- */
   --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 */

   --line-height-xs: 1rem;
   /* 16px */
   --line-height-sm: 1.25rem;
   /* 20px */
   --line-height-base: 1.5rem;
   /* 24px */
   --line-height-lg: 1.75rem;
   /* 28px */
   --line-height-xl: 1.75rem;
   /* 28px */
   --line-height-2xl: 2rem;
   /* 32px */
   --line-height-3xl: 2.25rem;
   /* 36px */

   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;

   --font-family-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-family-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;

   /* -----------------------------------------------------------------------
     Spacing Scale — 8 values (4px to 64px)
     ----------------------------------------------------------------------- */
   --space-1: 0.25rem;
   /* 4px  */
   --space-2: 0.5rem;
   /* 8px  */
   --space-3: 0.75rem;
   /* 12px */
   --space-4: 1rem;
   /* 16px */
   --space-5: 1.5rem;
   /* 24px */
   --space-6: 2rem;
   /* 32px */
   --space-7: 3rem;
   /* 48px */
   --space-8: 4rem;
   /* 64px */

   /* -----------------------------------------------------------------------
     Border Radius Tokens
     ----------------------------------------------------------------------- */
   --radius-sm: 0.25rem;
   /* 4px  */
   --radius-md: 0.5rem;
   /* 8px  */
   --radius-lg: 0.75rem;
   /* 12px */
   --radius-full: 9999px;

   /* -----------------------------------------------------------------------
     Shadows
     ----------------------------------------------------------------------- */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

   /* -----------------------------------------------------------------------
     Transitions
     ----------------------------------------------------------------------- */
   --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

   /* -----------------------------------------------------------------------
     Z-Index Scale
     ----------------------------------------------------------------------- */
   --z-dropdown: 10;
   --z-sticky: 20;
   --z-fixed: 30;
   --z-modal: 40;
   --z-toast: 50;
   --z-tooltip: 60;
}

/* ==========================================================================
   2. DARK MODE — .dark class on <html>
   Applied via JS before first paint (see dark mode toggle script)
   ========================================================================== */

.dark {
   /* Primary — slightly lighter in dark for readability */
   --color-primary-50: #001035;
   --color-primary-100: #001B51;
   --color-primary-200: #00266D;
   --color-primary-300: #003189;
   --color-primary-400: #1A6FD4;
   --color-primary-500: #3B8EF0;
   /* Lighter blue for dark backgrounds — 5.2:1 on #0F172A */
   --color-primary-600: #6BAAF5;
   --color-primary-700: #9BC5F9;
   --color-primary-800: #CBDFFC;
   --color-primary-900: #E6EDF8;

   /* Secondary — gold stays vibrant, adjusted for dark bg */
   --color-secondary-50: #4E3700;
   --color-secondary-100: #775400;
   --color-secondary-200: #A07000;
   --color-secondary-300: #C98D00;
   --color-secondary-400: #F2A900;
   --color-secondary-500: #F5B81A;
   /* Slightly brighter gold on dark — 8.6:1 on #0F172A */
   --color-secondary-600: #FBDB80;
   --color-secondary-700: #FDE9B3;
   --color-secondary-800: #FEF3D6;
   --color-secondary-900: #FEF7E6;

   /* Neutral Scale — inverted for dark mode */
   --color-neutral-50: #0F172A;
   --color-neutral-100: #1E293B;
   --color-neutral-200: #334155;
   --color-neutral-300: #475569;
   --color-neutral-400: #64748B;
   --color-neutral-500: #94A3B8;
   --color-neutral-600: #CBD5E1;
   --color-neutral-700: #E2E8F0;
   --color-neutral-800: #F1F5F9;

   /* Semantic Colors — dark mode variants */
   --color-success: #4ADE80;
   --color-success-bg: #052E16;
   --color-success-border: #166534;

   --color-warning: #FACC15;
   --color-warning-bg: #422006;
   --color-warning-border: #854D0E;

   --color-error: #F87171;
   --color-error-bg: #450A0A;
   --color-error-border: #991B1B;

   --color-info: #60A5FA;
   --color-info-bg: #172554;
   --color-info-border: #1E40AF;

   /* Functional Tokens — dark mode */
   --color-bg: #0F172A;
   --efes-bg: #000F2E;
   --color-surface: #1E293B;
   --color-surface-elevated: #334155;
   --color-border: var(--color-neutral-200);
   --color-border-strong: var(--color-neutral-300);

   --color-text: var(--color-neutral-800);
   /* #F1F5F9 on #0F172A = 15.4:1 */
   --color-text-secondary: var(--color-neutral-600);
   /* #CBD5E1 on #1E293B = 9.1:1 */
   --color-text-muted: var(--color-neutral-500);
   /* #94A3B8 on #1E293B = 5.2:1 — AA pass */
   --color-text-inverse: #0F172A;

   --color-link: var(--color-primary-500);
   --color-link-hover: var(--color-primary-600);

   --color-focus-ring: var(--color-primary-400);

   /* Shadows — more subtle on dark backgrounds */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   3. RESPONSIVE BREAKPOINTS
   Usage: media queries reference these values
   - sm:  640px
   - md:  768px
   - lg:  1024px
   - xl:  1280px
   ========================================================================== */

/* Breakpoints as CSS custom media (for documentation; actual usage via @media) */
/* @custom-media --breakpoint-sm (min-width: 640px);  */
/* @custom-media --breakpoint-md (min-width: 768px);  */
/* @custom-media --breakpoint-lg (min-width: 1024px); */
/* @custom-media --breakpoint-xl (min-width: 1280px); */

/* ==========================================================================
   4. UTILITY CLASSES (optional — use with design tokens)
   ========================================================================== */

/* Typography utilities */
.text-xs {
   font-size: var(--font-size-xs);
   line-height: var(--line-height-xs);
}

.text-sm {
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
}

.text-base {
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
}

.text-lg {
   font-size: var(--font-size-lg);
   line-height: var(--line-height-lg);
}

.text-xl {
   font-size: var(--font-size-xl);
   line-height: var(--line-height-xl);
}

.text-2xl {
   font-size: var(--font-size-2xl);
   line-height: var(--line-height-2xl);
}

.text-3xl {
   font-size: var(--font-size-3xl);
   line-height: var(--line-height-3xl);
}

/* Spacing helpers */
.gap-1 {
   gap: var(--space-1);
}

.gap-2 {
   gap: var(--space-2);
}

.gap-3 {
   gap: var(--space-3);
}

.gap-4 {
   gap: var(--space-4);
}

.gap-5 {
   gap: var(--space-5);
}

.gap-6 {
   gap: var(--space-6);
}

.gap-7 {
   gap: var(--space-7);
}

.gap-8 {
   gap: var(--space-8);
}

/* Surface and card helpers */
.surface {
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
}

.surface-elevated {
   background-color: var(--color-surface-elevated);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
}

/* Focus ring for accessibility */
.focus-ring:focus-visible {
   outline: 2px solid var(--color-primary-500);
   outline-offset: 2px;
}

/* ==========================================================================
   5. ACCESSIBILITY — prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}

/* ==========================================================================
   6. RESPONSIVE LAYOUT FOUNDATIONS
   Ensure no horizontal overflow at 375px minimum viewport
   ========================================================================== */

html {
   overflow-x: hidden;
   color-scheme: light;
}

.dark {
   color-scheme: dark;
}

body {
   min-width: 320px;
   overflow-x: hidden;
}

/* Container responsive widths */
.container {
   width: 100%;
   margin-inline: auto;
   padding-inline: var(--space-4);
}

@media (min-width: 640px) {
   .container {
      max-width: 640px;
   }
}

@media (min-width: 768px) {
   .container {
      max-width: 768px;
   }
}

@media (min-width: 1024px) {
   .container {
      max-width: 1024px;
   }
}

@media (min-width: 1280px) {
   .container {
      max-width: 1280px;
   }
}

/* ==========================================================================
   7. TOAST NOTIFICATION COMPONENT
   Fixed position bottom-right, zero CLS, GPU-composited transitions.
   Used with Alpine.js `toastNotification` component (assets/js/toast.js).
   ========================================================================== */

.toast-container {
   position: fixed;
   bottom: var(--space-5);
   right: var(--space-5);
   z-index: var(--z-toast);
   display: flex;
   flex-direction: column-reverse;
   gap: var(--space-2);
   pointer-events: none;
   /* Zero CLS: fixed positioning never causes reflow */
}

/* Responsive: move to bottom-center on small screens */
@media (max-width: 639px) {
   .toast-container {
      left: var(--space-3);
      right: var(--space-3);
      bottom: var(--space-3);
   }
}

.toast {
   display: flex;
   align-items: flex-start;
   gap: var(--space-3);
   padding: var(--space-3) var(--space-4);
   border-radius: var(--radius-md);
   border: 1px solid;
   box-shadow: var(--shadow-lg);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   font-family: var(--font-family-sans);
   max-width: 380px;
   width: 100%;
   pointer-events: auto;
   cursor: pointer;

   /* GPU compositing — zero layout shift */
   will-change: transform, opacity;
   transform: translateX(100%);
   opacity: 0;
   transition:
      transform var(--transition-slow),
      opacity var(--transition-slow);
}

/* Enter state: visible */
.toast.toast--visible {
   transform: translateX(0);
   opacity: 1;
}

/* Leave state: exit animation */
.toast.toast--leaving {
   transform: translateX(100%);
   opacity: 0;
}

/* Small screens: slide from bottom instead of right */
@media (max-width: 639px) {
   .toast {
      max-width: 100%;
      transform: translateY(100%);
   }

   .toast.toast--visible {
      transform: translateY(0);
   }

   .toast.toast--leaving {
      transform: translateY(100%);
      opacity: 0;
   }
}

/* ---- Type Variants ---- */

.toast--success {
   background-color: var(--color-success-bg);
   border-color: var(--color-success-border);
   color: var(--color-success);
}

.toast--warning {
   background-color: var(--color-warning-bg);
   border-color: var(--color-warning-border);
   color: var(--color-warning);
}

.toast--info {
   background-color: var(--color-info-bg);
   border-color: var(--color-info-border);
   color: var(--color-info);
}

/* Toast message text — uses primary text color for readability */
.toast__message {
   color: var(--color-text);
   flex: 1;
   word-break: break-word;
}

/* Toast icon container */
.toast__icon {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Toast dismiss button (close) */
.toast__dismiss {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   border: none;
   background: transparent;
   color: var(--color-text-muted);
   cursor: pointer;
   border-radius: var(--radius-sm);
   transition: color var(--transition-fast);
   padding: 0;
}

.toast__dismiss:hover {
   color: var(--color-text);
}

.toast__dismiss:focus-visible {
   outline: 2px solid var(--color-primary-500);
   outline-offset: 2px;
}

/* ---- Reduced Motion: static display, no transform/opacity transitions ---- */

@media (prefers-reduced-motion: reduce) {
   .toast {
      transform: none;
      opacity: 1;
      will-change: auto;
      transition: none;
   }

   .toast.toast--visible {
      transform: none;
      opacity: 1;
   }

   .toast.toast--leaving {
      transform: none;
      opacity: 1;
      /* Still allow removal — handled by JS timeout */
   }
}

/* ==========================================================================
   8. ANADOLU EFES BRAND UTILITIES (Badges, Glassmorphism, Buttons)
   ========================================================================== */

/* --------------------------------------------------------------------------
   8.1 Brand Badges
   -------------------------------------------------------------------------- */
.efes-badge {
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
   padding: 0.25rem 0.625rem;
   border-radius: var(--radius-full);
   font-family: var(--font-family-sans);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-bold);
   line-height: 1;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   transition: all var(--transition-base);
}

.efes-badge-navy {
   background-color: var(--efes-navy);
   color: #FFFFFF;
   border: 1px solid var(--efes-navy-dark);
}

.efes-badge-gold {
   background-color: var(--efes-gold);
   color: var(--efes-navy-dark);
   border: 1px solid var(--efes-gold-light);
}

.efes-badge-corporate {
   background: linear-gradient(135deg, var(--efes-navy) 0%, var(--efes-navy-dark) 100%);
   color: var(--efes-gold-light);
   border: 1px solid rgba(217, 119, 6, 0.4);
   box-shadow: 0 2px 8px rgba(0, 22, 66, 0.25);
}

.efes-badge-outline {
   background-color: transparent;
   color: var(--efes-navy);
   border: 1px solid var(--efes-navy);
}

.dark .efes-badge-outline {
   color: var(--efes-gold-light);
   border-color: var(--efes-gold);
}

/* --------------------------------------------------------------------------
   8.2 Corporate Glassmorphism
   -------------------------------------------------------------------------- */
.efes-glass {
   background: rgba(255, 255, 255, 0.75);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.4);
   box-shadow: var(--shadow-md);
}

.dark .efes-glass {
   background: rgba(0, 15, 46, 0.75);
   border: 1px solid rgba(255, 255, 255, 0.08);
}

.efes-glass-navy {
   background: rgba(0, 22, 66, 0.85);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid rgba(217, 119, 6, 0.25);
   color: #FFFFFF;
   box-shadow: 0 10px 30px rgba(0, 15, 46, 0.3);
}

.efes-glass-card {
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.65) 100%);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   border: 1px solid rgba(226, 232, 240, 0.8);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
}

.dark .efes-glass-card {
   background: linear-gradient(135deg, rgba(0, 22, 66, 0.85) 0%, rgba(0, 15, 46, 0.7) 100%);
   border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   8.3 Corporate Buttons
   -------------------------------------------------------------------------- */
.efes-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-2);
   padding: 0.625rem 1.25rem;
   font-family: var(--font-family-sans);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-sm);
   border-radius: var(--radius-md);
   border: 1px solid transparent;
   cursor: pointer;
   text-decoration: none;
   transition: all var(--transition-base);
   user-select: none;
}

.efes-btn:focus-visible {
   outline: 2px solid var(--efes-gold);
   outline-offset: 2px;
}

.efes-btn-primary,
.efes-btn-navy {
   background-color: var(--efes-navy);
   color: #FFFFFF;
   border-color: var(--efes-navy);
   box-shadow: 0 2px 4px rgba(0, 22, 66, 0.2);
}

.efes-btn-primary:hover,
.efes-btn-navy:hover {
   background-color: var(--efes-navy-dark);
   border-color: var(--efes-navy-dark);
   color: #FFFFFF;
   transform: translateY(-1px);
   box-shadow: 0 4px 8px rgba(0, 22, 66, 0.3);
}

.efes-btn-gold {
   background-color: var(--efes-gold);
   color: var(--efes-navy-dark);
   border-color: var(--efes-gold);
   font-weight: var(--font-weight-bold);
   box-shadow: 0 2px 4px rgba(217, 119, 6, 0.2);
}

.efes-btn-gold:hover {
   background-color: var(--efes-gold-light);
   border-color: var(--efes-gold-light);
   color: var(--efes-navy-dark);
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.efes-btn-outline {
   background-color: transparent;
   color: var(--efes-navy);
   border-color: var(--efes-navy);
}

.efes-btn-outline:hover {
   background-color: var(--efes-navy);
   color: #FFFFFF;
}

.dark .efes-btn-outline {
   color: var(--efes-gold-light);
   border-color: var(--efes-gold);
}

.dark .efes-btn-outline:hover {
   background-color: var(--efes-gold);
   color: var(--efes-navy-dark);
}