/* ==========================================================================
   ELAWADY Marine Supplies & Diving Equipment - Design System Tokens
   ========================================================================== */

/* ==========================================================================
   DARK THEME (Default) - Tactical Abyssal & Industrial
   ========================================================================== */
:root,
[data-theme="dark"] {
  /* Color Palette - Dark Tactical Theme */
  --clr-bg-abyss: #020609;         /* Deepest abyssal black */
  --clr-bg-navy: #060a0f;          /* Dark matte marine background */
  --clr-bg-surface: #0d1319;       /* Card / Section surfaces (matte steel) */
  --clr-bg-surface-elevated: #141c24; /* Dropdowns / Elevated cards */

  --clr-primary: #00f0ff;          /* Luminous Cyan - Primary tactical accent */
  --clr-primary-hover: #7af8ff;    /* Controlled cyan hover */
  --clr-primary-rgb: 0, 240, 255;

  --clr-accent: #00f0ff;           /* Unified to Luminous Cyan */
  --clr-accent-hover: #70f8ff;     /* Glowing cyan hover */
  --clr-accent-rgb: 0, 240, 255;

  --clr-txt-primary: #f3f7fa;      /* Premium off-white text */
  --clr-txt-secondary: #9aa7b4;    /* Readable steel gray secondary text */
  --clr-txt-disabled: #56616b;     /* Muted steel disabled */

  --clr-border: rgba(0, 240, 255, 0.13); /* Subtle cyan border */
  --clr-border-solid: #1e2932;     /* Industrial steel grey solid border */

  --clr-header-bg: rgba(2, 6, 9, 0.72);
  --clr-header-bg-scrolled: rgba(2, 6, 9, 0.94);
  --clr-header-border: rgba(0, 240, 255, 0.08);
  --clr-header-border-scrolled: rgba(0, 240, 255, 0.14);
}

/* ==========================================================================
   LIGHT THEME - Industrial Minimalist with Marine Accents
   ========================================================================== */
[data-theme="light"] {
  /* Color Palette - Light Technical Theme */
  --clr-bg-abyss: #F5F7F9;         /* Clean off-white foundation */
  --clr-bg-navy: #EEF2F5;          /* Light marine field */
  --clr-bg-surface: #E7EDF1;       /* Technical panel surface */
  --clr-bg-surface-elevated: #ffffff; /* Bright elevated cards */

  --clr-primary: #00758A;          /* Accessible cyan accent */
  --clr-primary-hover: #005D6E;    /* Darker cyan hover */
  --clr-primary-rgb: 0, 117, 138;

  --clr-accent: #00CFE8;           /* Luminous cyan detail */
  --clr-accent-hover: #008EA6;     /* Controlled cyan hover */
  --clr-accent-rgb: 0, 207, 232;

  --clr-txt-primary: #0F1720;      /* Deep technical charcoal */
  --clr-txt-secondary: #334155;    /* High-contrast slate */
  --clr-txt-disabled: #64748B;     /* Muted slate */

  --clr-border: rgba(0, 117, 138, 0.14); /* Subtle cyan border */
  --clr-border-solid: #D6E0E7;     /* Light steel border */

  --clr-header-bg: rgba(245, 247, 249, 0.86);
  --clr-header-bg-scrolled: rgba(255, 255, 255, 0.96);
  --clr-header-border: rgba(15, 23, 32, 0.08);
  --clr-header-border-scrolled: rgba(0, 117, 138, 0.14);

  --shadow-sm: 0 6px 18px rgba(15, 23, 32, 0.06);
  --shadow-md: 0 14px 34px rgba(15, 23, 32, 0.09);
  --shadow-lg: 0 22px 54px rgba(15, 23, 32, 0.12);
  --glow-primary: 0 0 0 1px rgba(0, 117, 138, 0.12);
  --glow-accent: 0 0 0 1px rgba(0, 207, 232, 0.14);
}

/* Typography Stacks (Bilingual) */
:root {
  --font-sans-en: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans-ar: 'Cairo', 'Amiri', system-ui, -apple-system, sans-serif;
  
  /* Fallback assignments dynamically selected by body lang */
  --font-primary: var(--font-sans-en);
  
  /* Typographic Scale (1.25x Major Third) */
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.88rem;
  --font-size-base: 1rem;
  --font-size-md: 1.25rem;
  --font-size-lg: 1.56rem;
  --font-size-xl: 1.95rem;
  --font-size-xxl: 2.44rem;
  --font-size-huge: 3.05rem;

  --line-height-tight: 1.1;
  --line-height-heading: 1.16;
  --line-height-body: 1.68;
  --line-height-loose: 1.82;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Fluid Spacing Grid (8px standard) */
  --space-xxs: 0.25rem;            /* 4px */
  --space-xs: 0.5rem;              /* 8px */
  --space-sm: 0.75rem;             /* 12px */
  --space-md: 1rem;                /* 16px */
  --space-lg: 1.5rem;              /* 24px */
  --space-xl: 2rem;                /* 32px */
  --space-xxl: 3rem;               /* 48px */
  --space-huge: 4.5rem;            /* 72px */

  /* UI Dimensions */
  --header-height: 76px;
  --max-width-site: 1200px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  
  /* Elevation Shadows & Glows */
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 14px 32px rgba(0, 0, 0, 0.16);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.22);
  --glow-primary: 0 0 18px rgba(0, 240, 255, 0.18);
  --glow-accent: 0 0 18px rgba(0, 240, 255, 0.18);

  /* Animation & Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark theme shadows override */
[data-theme="dark"] {
  --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.46);
  --shadow-md: 0 18px 42px rgba(0, 0, 0, 0.52);
  --shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.62);
  --glow-primary: 0 0 18px rgba(0, 240, 255, 0.22);
  --glow-accent: 0 0 18px rgba(0, 240, 255, 0.22);
}

/* Language Override Font Assignments */
html[lang="ar"] {
  --font-primary: var(--font-sans-ar);
}
html[lang="en"] {
  --font-primary: var(--font-sans-en);
}

/* High Contrast Accessibility Theme Support */
@media (prefers-contrast: more) {
  :root,
  [data-theme="dark"] {
    --clr-bg-abyss: #000000;
    --clr-bg-navy: #000000;
    --clr-bg-surface: #0a0a0a;
    --clr-txt-primary: #ffffff;
    --clr-txt-secondary: #e0e0e0;
    --clr-primary: #00ffff;
    --clr-accent: #00ffff;
    --clr-border-solid: #ffffff;
  }

  [data-theme="light"] {
    --clr-bg-navy: #ffffff;
    --clr-bg-surface: #f5f5f5;
    --clr-bg-surface-elevated: #ffffff;
    --clr-txt-primary: #000000;
    --clr-txt-secondary: #333333;
    --clr-primary: #005D6E;
    --clr-accent: #008EA6;
    --clr-border-solid: #000000;
  }
}