/**
 * 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-surface);
  --foreground:         var(--awan-text);
  --primary:            var(--awan-accent);
  --primary-foreground: var(--awan-surface);
  --secondary:          #E0DCC8;
  --secondary-foreground:var(--awan-text);
  --muted:              #E0DCC8;
  --muted-foreground:   var(--awan-muted);
  --accent:             #E0DCC8;
  --accent-foreground:  var(--awan-text);
  --border:             #C9C5B3;
  --border-light:       #E0DCC8;
  --input:              #C9C5B3;
  --ring:               var(--awan-accent);
  --radius:             0.5rem;

  /* ── CREAM PALETTE (Awan brand tokens) ── */
  --awan-bg:          var(--awan-surface);   /* warm parchment */
  --awan-surface:     #E0DCC8;   /* card / input well */
  --awan-border:      #C9C5B3;   /* divider / border */
  --awan-text:        #2A2C2B;   /* near-black primary */
  --awan-text-muted:  #8B8778;   /* visible muted text */
  --awan-accent:      #BE542E;   /* burnt orange — CTA / active */
  --awan-accent-hover:#A3452A;   /* accent hover */
  --awan-text-on-accent: var(--awan-surface);/* text on accent buttons */
  --awan-shadow:      rgba(13,15,14,0.06);
  --awan-shadow-md:   rgba(13,15,14,0.10);
  --awan-shadow-lg:   rgba(13,15,14,0.16);
  --awan-footer-bg:   #0D0F0E;   /* canonical near-black — footer, CTA hero frame (do NOT use --awan-text for backgrounds) */

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

  /* Main brand color - Orange accent */
  --itsawan-primary: var(--awan-accent);
  --itsawan-primary-rgb: 190, 84, 46;
  --itsawan-primary-light: rgba(190,84,46,0.15);
  --itsawan-primary-hover: rgba(190,84,46,0.2);

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

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

  /* Neutral colors */
  --itsawan-white: var(--awan-surface);
  --itsawan-line: #C9C5B3;

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

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

  /* Border colors */
  --itsawan-border: #C9C5B3;
  --itsawan-border-light: #E0DCC8;

  /* Background variations */
  --itsawan-bg-primary: var(--awan-surface);
  --itsawan-bg-secondary: var(--awan-surface);
  --itsawan-bg-muted: #E0DCC8;
  --itsawan-bg-hover: rgba(13,15,14,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(--awan-surface);

  /* Blur button variant */
  --itsawan-button-blur-bg: rgba(45, 45, 45, 0.1);
  --itsawan-button-blur-hover: rgba(45, 45, 45, 0.2);

  /* Scrollbar */
  --itsawan-scrollbar-thumb: #C9C5B3;
  --itsawan-scrollbar-thumb-hover: #7A7870;

  /* Selection */
  --itsawan-selection-bg: rgba(13,15,14,0.1);

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

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

  /* Font families */
  --itsawan-font-primary: 'MagicUiPro', 'Noto Sans Arabic', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --itsawan-font-arabic: 'Noto Sans Arabic', 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(13,15,14,0.05);
  --itsawan-shadow-md: 0 4px 6px -1px rgba(13,15,14,0.1);
  --itsawan-shadow-lg: 0 10px 15px -3px rgba(13,15,14,0.1);
  --itsawan-shadow-xl: 0 20px 25px -5px rgba(13,15,14,0.1);
  --itsawan-shadow-2xl: 0 25px 50px -12px rgba(13,15,14,0.25);

  /* ============ 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 — cream even in dark ══ */
  --background:         var(--awan-surface);
  --foreground:         var(--awan-text);
  --primary:            var(--awan-accent);
  --primary-foreground: var(--awan-surface);
  --secondary:          #E0DCC8;
  --secondary-foreground:var(--awan-text);
  --muted:              #E0DCC8;
  --muted-foreground:   var(--awan-muted);
  --accent:             #E0DCC8;
  --accent-foreground:  var(--awan-text);
  --border:             #C9C5B3;
  --border-light:       #E0DCC8;
  --input:              #C9C5B3;
  --ring:               var(--awan-accent);

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

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

  /* Keep primary orange the same */
  --itsawan-primary: var(--awan-accent);
  --itsawan-primary-rgb: 190, 84, 46;
  --itsawan-primary-light: rgba(190,84,46,0.2);
  --itsawan-primary-hover: rgba(190,84,46,0.3);

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

  /* Neutral colors — mirrors light */
  --itsawan-white: var(--awan-surface);
  --itsawan-line: #C9C5B3;

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

  /* Text colors — mirrors light (cream theme) */
  --itsawan-text-primary: var(--awan-text);
  --itsawan-text-secondary: var(--awan-muted);
  --itsawan-text-muted: #7A7870;
  --itsawan-text-light: #8A8880;
  --itsawan-text-active: var(--awan-text);

  /* Border colors — mirrors light */
  --itsawan-border: #C9C5B3;
  --itsawan-border-light: rgba(201,197,179,0.5);

  /* Background variations — mirrors light */
  --itsawan-bg-primary: var(--awan-surface);
  --itsawan-bg-secondary: #E0DCC8;
  --itsawan-bg-muted: #E0DCC8;
  --itsawan-bg-hover: rgba(13,15,14,0.05);

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

  /* Buttons — mirrors light */
  --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: var(--awan-surface);

  /* Blur button variant - dark mode */
  --itsawan-button-blur-bg: hsla(0, 0%, 82.4%, 0.1);
  --itsawan-button-blur-hover: hsla(0, 0%, 82.4%, 0.2);

  /* Scrollbar - dark mode */
  --itsawan-scrollbar-thumb: var(--awan-muted);
  --itsawan-scrollbar-thumb-hover: var(--awan-muted);

  /* Selection - dark mode */
  --itsawan-selection-bg: rgba(233,230,215,0.1);

  /* 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);
}

/* 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
   ======================================== */