/* ============================================
   WonderWraps Design Tokens
   ============================================ */

:root {
  /* ---- Primary Hue (change this one value to rebrand) ---- */
  --hue-primary: 16;

  /* ---- Colors (HSL system) ---- */
 --color-primary: hsl(var(--hue-primary), 99%, 56%);
--color-primary-dark: hsl(var(--hue-primary), 90%, 48%);
--color-primary-light: hsl(var(--hue-primary), 100%, 95%);
  --color-bg-white: #FFFFFF;
  --color-text-dark: hsl(240, 33%, 14%);
  --color-text-body: hsl(240, 11%, 33%);
  --color-text-muted: hsl(240, 7%, 56%);
  --color-text-white: #FFFFFF;
  --color-border: hsl(var(--hue-primary), 20%, 92%);
  --color-bg-light: hsl(var(--hue-primary), 100%, 97%);
  --color-badge-yellow: hsl(43, 90%, 61%);
  --color-badge-red: hsl(6, 78%, 57%);
  --color-star: hsl(43, 90%, 61%);
  --color-success: hsl(145, 63%, 49%);
  --color-facebook: hsl(214, 89%, 52%);
  --color-facebook-hover: hsl(214, 85%, 46%);
  --color-google: hsl(5, 69%, 54%);
  --color-google-hover: hsl(5, 69%, 46%);
  --color-promo-bg: hsl(240, 33%, 14%);
  --color-hero-gradient-start: hsl(var(--hue-primary), 99%, 56%);
  --color-hero-gradient-end: hsl(var(--hue-primary), 90%, 70%);
  --color-overlay: hsla(240, 33%, 14%, 0.5);

  /* ---- Typography ---- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.7;

  /* ---- Spacing ---- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-padding: 1.5rem;
  --navbar-height: 72px;
  --promo-height: 40px;
  --footer-bg: hsl(var(--hue-primary), 15%, 10%);

  /* ---- Borders ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 50px;
  --radius-circle: 50%;

  /* ---- Shadows (using primary hue) ---- */
  --shadow-sm: 0 1px 3px hsla(0, 0%, 0%, 0.08);
  --shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.1);
  --shadow-lg: 0 8px 30px hsla(0, 0%, 0%, 0.12);
  --shadow-card: 0 2px 8px hsla(var(--hue-primary), 60%, 57%, 0.08);
  --shadow-card-hover: 0 8px 24px hsla(var(--hue-primary), 60%, 57%, 0.15);

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ---- Z-index ---- */
  --z-promo: 100;
  --z-navbar: 90;
  --z-dropdown: 80;
  --z-overlay: 70;
  --z-modal: 110;
  --z-drawer: 105;
}

/* ---- RTL Direction Helpers ---- */
[dir="rtl"] { --dir: -1; }
[dir="ltr"] { --dir: 1; }