/* ═══════════════════════════════════════
   CLEN | كلن — Design Tokens
   All colors defined here ONLY
   ═══════════════════════════════════════ */

:root {
  /* Brand */
  --color-primary: #636eb2;
  --color-primary-light: #7a84c4;
  --color-primary-dark: #4f5890;
  --color-primary-subtle: #f0f1f8;
  --color-primary-overlay: #636eb266;
  --color-accent: #0284c7;
  --color-accent-light: #38bdf8;

  /* Neutrals */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-background: #ffffff;
  --color-card: #ffffff;
  --color-surface: var(--color-card);
  --color-surface-elevated: var(--color-card);
  --color-surface-tint: #f9f9ff;
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;
  --color-border-tab: #dce6ec;
  --color-border-card: #d2d6db;
  --color-border-faq: #d2d6db99;
  --color-border-card-divider: #cfc2d44d;
  --color-border-faq-divider: #cfc2d41a;
  --color-divider: #e2e8f0;
  --color-gallery: #ededed;
  --color-logo-text: #000000bf;

  /* Text */
  --color-text-primary: #1f1a22;
  --color-text-secondary: #4c4452;
  --color-text-muted: #94a3b8;
  --color-text-inverse: #ffffff;
  --color-text-on-primary: #ffffff;

  /* Semantic */
  --color-success: #16a34a;
  --color-success-bg: #dcfce7;
  --color-warning: #f59e0b;
  --color-warning-bg: #fef3c7;
  --color-notice-bg: #fff6e6;
  --color-notice-text: #8a5b12;
  --color-discount: #0f9d6e;
  --color-total-primary: var(--color-primary);
  --color-order-pending-bg: #f0faff;
  --color-order-pending-text: #0075ad;
  --color-order-completed-bg: #eefbf4;
  --color-order-completed-text: #17663a;
  --color-order-details-bg: #f5f5f5;
  --color-order-details-text: #6c6c6c;
  --color-item-card-text: #383a42;
  --color-error: #dc2626;
  --color-error-bg: #fee2e2;
  --color-error-light: #fcebeb;
  --color-error-text: #d14343;
  --color-gray-200: #dce6ec;
  --color-info: #0284c7;
  --color-info-bg: #e0f2fe;

  /* Status badges */
  --color-status-pending: #d97706;
  --color-status-pending-bg: #fef3c7;
  --color-status-confirmed: #16a34a;
  --color-status-confirmed-bg: #dcfce7;
  --color-status-completed: #0284c7;
  --color-status-completed-bg: #e0f2fe;
  --color-status-cancelled: #dc2626;
  --color-status-cancelled-bg: #fee2e2;

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

  /* Spacing scale (~20% smaller) */
  --space-1: 3px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 13px;
  --space-5: 16px;
  --space-6: 19px;
  --space-8: 26px;
  --space-10: 32px;
  --space-12: 38px;
  --space-16: 52px;

  /* Spacing aliases */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);

  /* Border radius */
  --radius-sm: 0.3rem;
  --radius-md: 0.6rem;
  --radius-lg: 0.8rem;
  --radius-xl: 1.2rem;
  --radius-full: 9999px;

  /* Typography (~15% smaller) */
  --font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  --font-family-logo: 'Segoe UI', 'IBM Plex Sans Arabic', sans-serif;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 19px;
  --font-size-2xl: 22px;
  --font-size-3xl: 26px;
  --font-size-4xl: 30px;
  --font-size-hero: 26px;
  --font-size-logo: 24px;
  --font-size-card-title: 15px;
  --font-size-card-desc: 10px;
  --font-size-card-price: 14px;
  --font-size-promo: 12px;
  --font-size-services-title: 12px;
  --font-size-faq-q: 15px;
  --font-size-faq-a: 14px;
  --font-size-testimonial: 15px;
  --font-size-testimonial-phone: 17px;
  --font-size-footer-heading: 15px;
  --font-size-footer-body: 14px;
  --font-size-copyright: 10px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-services-title: 1.35;
  --line-height-card-title: 1.35;
  --line-height-card-desc: 1.4;
  --line-height-card-price: 1.2;
  --line-height-hero: 51px;
  --line-height-hero-sub: 24px;
  --line-height-faq-q: 24px;
  --line-height-faq-a: 21px;
  --line-height-testimonial: 22px;
  --line-height-footer: 21px;
  --line-height-copyright: 14px;
  --letter-spacing-hero: -0.05rem;

  /* Layout */
  --header-height: 58px;
  --navbar-height: 3.6rem;
  --max-width: 390px;
  --page-padding: 13px;
  --section-gap: 32px;
  --radius-hero: 16px;
  --radius-card: 14px;
  --radius-chip: 10px;
  --radius-compare: 10px;
  --radius-btn-sm: 5px;
  --radius-testimonial: 8px;
  --radius-faq: 10px;
  --radius-menu: 4px;
  --shadow-card: 0 3px 32px rgba(0, 0, 0, 0.08);
  --shadow-compare: 0 3px 3px rgba(0, 0, 0, 0.25);
  --color-social-bg: #ffffff1a;
  --landing-hero-width: 100%;
  --landing-hero-height: auto;
  --landing-hero-aspect: 3 / 1;
  --landing-hero-max-height: 128px;
  --landing-card-width: 1fr;
  --landing-card-image-height: 96px;
  --landing-compare-height: auto;
  --landing-compare-slider-width: 200px;
  --landing-compare-slider-height: 150px;
  --landing-compare-side-width: 170px;
  --landing-compare-side-height: 124px;
  --touch-target-min: 40px;
  --icon-sm: 17px;
  --icon-md: 20px;
  --icon-lg: 34px;

  /* Input text (adapts to card darkness) */
  --color-input-text: var(--color-mirage);
  --color-input-placeholder: var(--color-hit-gray);

  /* Booking location */
  --color-booking-page-bg: var(--color-background);
  --color-rhino: #272d52;
  --color-pale-sky: #647682;
  --color-mirage: #1c2b36;
  --color-periwinkle: #b8bde4;
  --color-hit-gray: #a6b3bc;
  --color-address-card-bg: rgba(240, 241, 249, 0.5);
  /* Booking OTP */
  --booking-stepper-size: 28px;
  --otp-digit-size: 52px;
  --otp-digit-size-desktop: 64px;

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

  /* Z-index */
  --z-header: 100;
  --z-navbar: 100;
  --z-modal: 200;
  --z-toast: 300;
}

/* Tablet — 481px–1023px */
@media (min-width: 481px) and (max-width: 1023px),
       (min-width: 1024px) and (max-width: 1199px) and (orientation: portrait) {
  :root {
    --max-width: 600px;
    --page-padding: 16px;
    --header-height: 64px;
    --font-size-base: 15px;
    --font-size-hero: 28px;
    --font-size-logo: 26px;
    --font-size-2xl: 23px;
    --font-size-card-title: 16px;
    --font-size-card-desc: 11px;
    --font-size-card-price: 15px;
    --font-size-promo: 12px;
    --font-size-services-title: 13px;
    --font-size-faq-q: 16px;
    --font-size-faq-a: 15px;
    --font-size-testimonial: 16px;
    --font-size-testimonial-phone: 18px;
    --font-size-footer-heading: 16px;
    --font-size-footer-body: 15px;
    --font-size-copyright: 11px;
    --line-height-hero: 54px;
    --line-height-hero-sub: 26px;
    --line-height-services-title: 1.485;
    --line-height-card-title: 29px;
    --line-height-card-desc: 17px;
    --line-height-card-price: 26px;
    --line-height-faq-q: 26px;
    --line-height-faq-a: 22px;
    --line-height-testimonial: 24px;
    --line-height-footer: 22px;
    --line-height-copyright: 15px;
    --landing-hero-width: 100%;
    --landing-hero-height: auto;
    --landing-hero-aspect: 21 / 9;
    --landing-hero-max-height: 200px;
    --landing-card-width: 148px;
    --landing-card-image-height: 96px;
    --landing-compare-height: auto;
    --landing-compare-slider-width: 100%;
    --landing-compare-slider-height: auto;
    --landing-compare-side-width: 0;
    --landing-compare-side-height: 0;
    --touch-target-min: 40px;
    --section-gap: 38px;
  }
}

/* iPad portrait — same tablet style, scaled to device width */
@media (min-width: 744px) and (max-width: 1199px) and (orientation: portrait) {
  :root {
    --max-width: 100%;
    --page-padding: clamp(22px, 3.6vw, 32px);
    --landing-hero-max-height: 220px;
    --landing-card-width: min(148px, 42vw);
    --landing-card-image-height: clamp(82px, 12vw, 104px);
  }
}

@media (min-width: 1200px) {
  :root {
    --max-width: 1440px;
    --page-padding: 40px;
    --header-height: 70px;
    --font-size-base: 15px;
    --font-size-hero: 51px;
    --font-size-logo: 26px;
    --font-size-2xl: 41px;
    --font-size-promo: 14px;
    --font-size-services-title: 16px;
    --font-size-card-title: 19px;
    --font-size-card-desc: 13px;
    --font-size-card-price: 15px;
    --font-size-faq-q: 15px;
    --font-size-testimonial: 14px;
    --line-height-hero: 51px;
    --line-height-hero-sub: 24px;
    --line-height-services-title: 1.2;
    --line-height-card-title: 1.35;
    --line-height-card-desc: 1.4;
    --landing-hero-width: 100%;
    --landing-hero-height: auto;
    --landing-hero-aspect: 21 / 9;
    --landing-hero-max-height: 280px;
    --landing-card-width: 1fr;
    --landing-card-image-height: 128px;
    --landing-compare-height: auto;
    --landing-compare-slider-width: min(640px, 48vw);
    --landing-compare-slider-height: min(360px, 27vw);
    --landing-compare-side-width: min(300px, 18vw);
    --landing-compare-side-height: min(228px, 14vw);
    --radius-btn-sm: 10px;
    --section-gap: 38px;
  }
}