/**
 * Itsawan Design Tokens
 * Extracted from itsawan.com Next.js template
 * Date: 2026-02-11
 * Version: 1.0.0
 *
 * This file contains the complete design system from itsawan.com
 * mapped to CSS custom properties for use in Vitrin theme.
 */

/* ========================================
   COLOR SYSTEM
   Extracted from globals.css and tailwind.config.ts
   ======================================== */

:root {
  /* ══ ZID PLATFORM TOKENS — these drive body bg, btn-filled, etc. in styles.css ══ */
  --background:         var(--awan-bg);
  --foreground:         var(--awan-text);
  --primary:            var(--awan-accent);
  --primary-foreground: #FFFFFF;
  --secondary:          #161C36;
  --secondary-foreground:var(--awan-text);
  --muted:              #10142A;
  --muted-foreground:   var(--awan-text-muted);
  --accent:             #161C36;
  --accent-foreground:  var(--awan-text);
  --border:             rgba(167,139,250,0.14);
  --border-light:       #161C36;
  --input:              #161C36;
  --ring:               #8B5CF6;
  --radius:             0.5rem;

  /* ── MOMO 5 NAVY PALETTE (canonical tokens from MOMO5-DESIGN-BRIEF §3) ── */
  --momo-bg-deep:    #070A14;   /* page bg, hero */
  --momo-bg:         #0B1020;   /* sections */
  --momo-surface:    #10142A;   /* cards */
  --momo-raised:     #161C36;   /* elevated cards, CTA zones */
  --momo-text:       #F4F5FA;   /* headlines, price */
  --momo-text-2:     #A9AECB;   /* body */
  --momo-muted:      #7C82A6;   /* captions/spec labels */
  --momo-accent:     #8B5CF6;   /* icon glows, small marks */
  --momo-accent-hi:  #A78BFA;   /* accent text, links, kickers */
  --momo-lavender:   #C4B5FD;   /* highlighted words, Arabic emphasis */
  --momo-cta:        #7C3AED;   /* buy button fill, white text */
  --momo-success:    #34D399;   /* stock/secure ticks only */

  /* ── NAVY PALETTE (MOMO 5 brand tokens — names kept for compatibility) ── */
  --awan-bg:          var(--momo-bg-deep);   /* deep navy page bg */
  --awan-surface:     var(--momo-surface);   /* card / input well */
  --awan-border:      rgba(167,139,250,0.14);   /* divider / border */
  --awan-text:        var(--momo-text);   /* near-white primary TEXT (never a background) */
  --awan-text-muted:  var(--momo-text-2);   /* visible muted text */
  --awan-accent:      var(--momo-cta);   /* purple — CTA / active */
  --awan-accent-hover:var(--momo-accent);   /* accent hover (lighten, same hue) */
  --awan-text-on-accent: var(--momo-text);/* light text on purple accent / dark surfaces */
  --awan-shadow:      rgba(2,4,10,0.35);
  --awan-shadow-md:   rgba(2,4,10,0.45);
  --awan-shadow-lg:   rgba(2,4,10,0.55);
  --awan-footer-bg:   #070A14;   /* canonical deep navy — footer, CTA hero frame (do NOT use --awan-text for backgrounds) */

  /* ============ PRIMARY COLORS ============ */

  /* Main brand color - Purple accent */
  --itsawan-primary: var(--awan-accent);
  --itsawan-primary-rgb: 124, 58, 237;
  --itsawan-primary-light: rgba(139,92,246,0.15);
  --itsawan-primary-hover: rgba(139,92,246,0.25);

  /* Background colors - Navy mode default */
  --itsawan-background: var(--awan-bg);
  --itsawan-foreground: var(--awan-text);

  /* Critical/Error color */
  --itsawan-critical: #ef4444;

  /* Neutral colors */
  --itsawan-white: var(--awan-text);
  --itsawan-line: rgba(167,139,250,0.14);

  /* ============ SEMANTIC COLORS ============ */

  /* Text colors */
  --itsawan-text-primary: var(--awan-text);
  --itsawan-text-secondary: var(--awan-text-muted);
  --itsawan-text-muted: #7C82A6;
  --itsawan-text-light: #A9AECB;
  --itsawan-text-active: var(--awan-text);

  /* Border colors */
  --itsawan-border: rgba(167,139,250,0.14);
  --itsawan-border-light: #161C36;

  /* Background variations */
  --itsawan-bg-primary: var(--awan-bg);
  --itsawan-bg-secondary: var(--momo-bg);
  --itsawan-bg-muted: var(--momo-surface);
  --itsawan-bg-hover: rgba(244,245,250,0.05);

  /* ============ COMPONENT COLORS ============ */

  /* Buttons */
  --itsawan-button-bg: transparent;
  --itsawan-button-border: var(--awan-text);
  --itsawan-button-text: var(--awan-text);
  --itsawan-button-hover-bg: var(--awan-text);
  --itsawan-button-hover-text: var(--momo-bg-deep);

  /* Blur button variant */
  --itsawan-button-blur-bg: rgba(244, 245, 250, 0.08);
  --itsawan-button-blur-hover: rgba(244, 245, 250, 0.16);

  /* Scrollbar */
  --itsawan-scrollbar-thumb: #161C36;
  --itsawan-scrollbar-thumb-hover: #7C82A6;

  /* Selection */
  --itsawan-selection-bg: rgba(139,92,246,0.35);

  /* Swiper/Carousel */
  --itsawan-swiper-color: var(--awan-accent);
  --itsawan-swiper-nav-size: 48px;
  --itsawan-swiper-bullet-size: 12px;

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

  /* Font families — MOMO 5: Inter (Latin) / IBM Plex Sans Arabic (AR); MagicUiPro wordmark only */
  --itsawan-font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --itsawan-font-arabic: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
  --itsawan-font-wordmark: 'MagicUiPro', 'Inter', sans-serif;

  /* Font weights */
  --itsawan-font-normal: 400;
  --itsawan-font-medium: 500;
  --itsawan-font-semibold: 600;
  --itsawan-font-bold: 700;

  /* Font sizes - Matching itsawan.com scale */
  --itsawan-text-xs: 0.75rem;      /* 12px */
  --itsawan-text-sm: 0.875rem;     /* 14px */
  --itsawan-text-base: 1rem;       /* 16px */
  --itsawan-text-lg: 1.125rem;     /* 18px */
  --itsawan-text-xl: 1.25rem;      /* 20px */
  --itsawan-text-2xl: 1.5rem;      /* 24px */
  --itsawan-text-3xl: 1.875rem;    /* 30px */
  --itsawan-text-4xl: 2.25rem;     /* 36px */
  --itsawan-text-5xl: 3rem;        /* 48px */
  --itsawan-text-6xl: 3.75rem;     /* 60px */

  /* Line height */
  --itsawan-leading-tight: 1.2;
  --itsawan-leading-normal: 1.6;
  --itsawan-leading-relaxed: 1.8;

  /* Letter spacing */
  --itsawan-tracking-tight: -0.01rem;
  --itsawan-tracking-normal: 0;
  --itsawan-tracking-wide: 0.025rem;

  /* ============ SPACING ============ */

  /* Spacing scale - Matching Tailwind */
  --itsawan-spacing-xs: 0.25rem;   /* 4px */
  --itsawan-spacing-sm: 0.5rem;    /* 8px */
  --itsawan-spacing-md: 1rem;      /* 16px */
  --itsawan-spacing-lg: 1.5rem;    /* 24px */
  --itsawan-spacing-xl: 2rem;      /* 32px */
  --itsawan-spacing-2xl: 3rem;     /* 48px */
  --itsawan-spacing-3xl: 4rem;     /* 64px */
  --itsawan-spacing-4xl: 6rem;     /* 96px */

  /* Container padding - From tailwind.config.ts */
  --itsawan-container-padding: 1rem;
  --itsawan-container-padding-sm: 2rem;
  --itsawan-container-padding-lg: 4rem;
  --itsawan-container-padding-xl: 5rem;
  --itsawan-container-padding-2xl: 6rem;

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

  /* Border radius scale */
  --itsawan-radius-sm: 0.25rem;    /* 4px */
  --itsawan-radius-md: 0.5rem;     /* 8px */
  --itsawan-radius-lg: 0.75rem;    /* 12px */
  --itsawan-radius-xl: 1rem;       /* 16px */
  --itsawan-radius-2xl: 1.5rem;    /* 24px */
  --itsawan-radius-full: 9999px;   /* Full rounded */

  /* Tailwind-style radius */
  --itsawan-radius: 0.5rem;
  --itsawan-radius-button: 9999px; /* Full pill shape */

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

  /* Shadow scale */
  --itsawan-shadow-sm: 0 1px 2px 0 rgba(2,4,10,0.3);
  --itsawan-shadow-md: 0 4px 6px -1px rgba(2,4,10,0.4);
  --itsawan-shadow-lg: 0 10px 15px -3px rgba(2,4,10,0.4);
  --itsawan-shadow-xl: 0 20px 25px -5px rgba(2,4,10,0.45);
  --itsawan-shadow-2xl: 0 25px 50px -12px rgba(2,4,10,0.6);

  /* ============ TRANSITIONS ============ */

  /* Transition durations */
  --itsawan-transition-fast: 150ms;
  --itsawan-transition-base: 200ms;
  --itsawan-transition-slow: 300ms;
  --itsawan-transition-slower: 500ms;

  /* Transition timing functions */
  --itsawan-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --itsawan-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --itsawan-ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Combined transition */
  --itsawan-transition: all 200ms ease-in-out;

  /* ============ Z-INDEX LAYERS ============ */

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

  /* ============ BREAKPOINTS ============ */
  /* Note: Use in media queries, not as CSS variables */
  /* sm: 640px */
  /* md: 768px */
  /* lg: 1024px */
  /* xl: 1280px */
  /* 2xl: 1536px */

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

  --itsawan-header-height: 80px;
  --itsawan-max-width: 1280px;
  --itsawan-max-width-xl: 1536px;
}

/* ========================================
   DARK MODE
   Inverted color scheme from globals.css
   ======================================== */

[data-theme="dark"] {
  /* ══ ZID PLATFORM TOKENS — navy in dark too (MOMO 5 is navy-only) ══ */
  --background:         var(--awan-bg);
  --foreground:         var(--awan-text);
  --primary:            var(--awan-accent);
  --primary-foreground: #FFFFFF;
  --secondary:          #161C36;
  --secondary-foreground:var(--awan-text);
  --muted:              #10142A;
  --muted-foreground:   var(--awan-text-muted);
  --accent:             #161C36;
  --accent-foreground:  var(--awan-text);
  --border:             rgba(167,139,250,0.14);
  --border-light:       #161C36;
  --input:              #161C36;
  --ring:               #8B5CF6;

  /* ============ PRIMARY COLORS (Dark) ============ */

  /* Main colors - mirrors navy */
  --itsawan-background: var(--awan-bg);
  --itsawan-foreground: var(--awan-text);

  /* Keep primary purple the same */
  --itsawan-primary: var(--awan-accent);
  --itsawan-primary-rgb: 124, 58, 237;
  --itsawan-primary-light: rgba(139,92,246,0.2);
  --itsawan-primary-hover: rgba(139,92,246,0.3);

  /* Critical stays same for visibility */
  --itsawan-critical: #ef4444;

  /* Neutral colors — mirrors light */
  --itsawan-white: var(--awan-text);
  --itsawan-line: rgba(167,139,250,0.14);

  /* ============ SEMANTIC COLORS (Dark) ============ */

  /* Text colors — mirrors navy */
  --itsawan-text-primary: var(--awan-text);
  --itsawan-text-secondary: var(--awan-text-muted);
  --itsawan-text-muted: #7C82A6;
  --itsawan-text-light: #A9AECB;
  --itsawan-text-active: var(--awan-text);

  /* Border colors — mirrors navy */
  --itsawan-border: rgba(167,139,250,0.14);
  --itsawan-border-light: rgba(167,139,250,0.07);

  /* Background variations — mirrors navy */
  --itsawan-bg-primary: var(--awan-bg);
  --itsawan-bg-secondary: var(--momo-bg);
  --itsawan-bg-muted: var(--momo-surface);
  --itsawan-bg-hover: rgba(244,245,250,0.05);

  /* ============ COMPONENT COLORS (Dark) ============ */

  /* Buttons — mirrors navy */
  --itsawan-button-bg: transparent;
  --itsawan-button-border: var(--awan-text);
  --itsawan-button-text: var(--awan-text);
  --itsawan-button-hover-bg: var(--awan-accent);
  --itsawan-button-hover-text: #FFFFFF;

  /* Blur button variant - dark mode */
  --itsawan-button-blur-bg: rgba(244, 245, 250, 0.08);
  --itsawan-button-blur-hover: rgba(244, 245, 250, 0.16);

  /* Scrollbar - dark mode */
  --itsawan-scrollbar-thumb: #161C36;
  --itsawan-scrollbar-thumb-hover: #7C82A6;

  /* Selection - dark mode */
  --itsawan-selection-bg: rgba(139,92,246,0.35);

  /* Swiper - keep same */
  --itsawan-swiper-color: var(--awan-accent);
}

/* ========================================
   GLOBAL RESETS & UTILITIES
   Applied to match itsawan.com behavior
   ======================================== */

/* Smooth color transitions on theme change — canonical rule lives in awan-exact.css */

/* Typography defaults */
body {
  font-family: var(--itsawan-font-primary);
  font-size: var(--itsawan-text-base);
  font-weight: var(--itsawan-font-normal);
  line-height: var(--itsawan-leading-normal);
  letter-spacing: var(--itsawan-tracking-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--itsawan-background);
  color: var(--itsawan-foreground);
}

/* Arabic: IBM Plex Sans Arabic first, NO letter-spacing (breaks joining), taller line-height */
html[lang="ar"] body {
  font-family: var(--itsawan-font-arabic);
  letter-spacing: 0;
  line-height: 1.7;
}

/* Media defaults */
img,
video {
  height: auto;
  max-width: 100%;
  display: block;
}

/* Custom scrollbar - matching itsawan.com */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--itsawan-scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--itsawan-scrollbar-thumb-hover);
}

/* Selection color */
::selection {
  background: var(--itsawan-selection-bg);
}

/* ========================================
   UTILITY CLASSES
   Common patterns from itsawan.com
   ======================================== */

/* Text utilities */
.text-primary {
  color: var(--itsawan-text-primary);
}

.text-secondary {
  color: var(--itsawan-text-secondary);
}

.text-muted {
  color: var(--itsawan-text-muted);
}

.text-active {
  color: var(--itsawan-text-active);
}

/* Background utilities */
.bg-primary {
  background: var(--itsawan-bg-primary);
}

.bg-secondary {
  background: var(--itsawan-bg-secondary);
}

.bg-muted {
  background: var(--itsawan-bg-muted);
}

/* Border utilities */
.border-primary {
  border-color: var(--itsawan-border);
}

/* Transition utilities */
.transition-all {
  transition: var(--itsawan-transition);
}

.transition-fast {
  transition-duration: var(--itsawan-transition-fast);
}

.transition-slow {
  transition-duration: var(--itsawan-transition-slow);
}

/* ========================================
   END OF ITSAWAN DESIGN TOKENS
   ======================================== */