/* ============================================================
   ROOT THEME
   ============================================================ */
:root {
  /* Color Palette */
  --clr-bg: #f9fafb;
  --clr-bg-alt: #f0f4f8;
  --clr-bg-card: #ffffff;
  --clr-bg-raised: #eef5ff;
  --clr-accent: #027bff;
  --clr-accent-dim: #0260c4;
  --clr-accent-glow: #027bff22;
  --clr-text: #1f2937;
  --clr-text2: #374151;
  --clr-text3: #202122;
  --clr-text-muted: #555555;
  --clr-text-faint: #6c757d;
  --clr-border: #e2e8f0;
  --clr-border-accent: #027bff44;
  --clr-white: #ffffff;
  --clr-black: #000000;
  --clr-input-bg: #f8f9fa;
  --clr-on-accent: #ffffff;

  /* Footer  Palette */
  --footer-bg: #101218;
  --footer-card-bg: rgba(36, 37, 39, 0.876);
  --footer-text: var(--clr-white);
  --footer-text-muted: #f0efef;
  --footer-border: #374151;
  --footer-border-accent: #027bff44;
  --footer-social-hover-bg: rgba(255, 255, 255, 0.137);

  /* Hero Gradients — Desktop */
  --hero-gradient-dark-desktop: linear-gradient(
    to right,
    #0260c4 0%,
    #027bff 20%,
    #3d9aff 40%,
    #7dbeff 58%,
    #b8d9ff 73%,
    #deeeff 85%,
    #f8f9fa 100%
  );
  --hero-gradient-light-desktop: linear-gradient(
    to right,
    #f5f5f5 15%,
    #ebebeb 45%,
    rgba(224, 224, 224, 0.85) 70%,
    rgba(224, 224, 224, 0) 100%
  );

  /* Hero Gradients — Tablet */
  --hero-gradient-dark-tablet: linear-gradient(
    to bottom,
    #0260c4 0%,
    #027bff 25%,
    #3d9aff 48%,
    #a8d4ff 70%,
    #deeeff 85%,
    #f8f9fa 100%
  );
  --hero-gradient-light-tablet: linear-gradient(
    to bottom,
    #f5f5f5 10%,
    #ebebeb 40%,
    rgba(224, 224, 224, 0.9) 65%,
    rgba(224, 224, 224, 0) 100%
  );

  /* Hero Gradients — Mobile */
  --hero-gradient-dark-mobile: linear-gradient(
    to bottom,
    #0260c4 0%,
    #027bff 22%,
    #4fa3ff 48%,
    #b8d9ff 68%,
    #eef5ff 85%,
    #f8f9fa 100%
  );
  --hero-gradient-light-mobile: linear-gradient(
    to bottom,
    #f5f5f5 15%,
    #ebebeb 35%,
    rgba(224, 224, 224, 0.9) 50%,
    rgba(224, 224, 224, 0) 65%
  );

  /* CTA Gradient */
  --cta-gradient: linear-gradient(135deg, #007bff, #0056b3);

  /* Hero Masks */
  --hero-mask-desktop: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.05) 5%,
    rgba(0, 0, 0, 0.25) 14%,
    rgba(0, 0, 0, 0.6) 24%,
    rgba(0, 0, 0, 0.85) 34%,
    #000 45%,
    #000 100%
  );
  --hero-mask-mobile: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 8%,
    rgba(0, 0, 0, 0.8) 16%,
    #000 24%,
    #000 100%
  );

  /* Typography */
  --font-display: "Poppins", sans-serif;
  --font-body: "Poppins", sans-serif;

  /* Type Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Borders & Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-v-sm: 0 1px 6px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);
  --shadow-accent: 0 8px 32px rgba(2, 123, 255, 0.2);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --trans-fast: 150ms var(--ease-out);
  --trans-base: 250ms var(--ease-out);
  --trans-slow: 400ms var(--ease-out);

  /* ── Navbar ── */
  --nav-bg: rgba(249, 250, 251, 0.95);
  --nav-border: var(--clr-border);
  --nav-text: #1f2937;
  --nav-text-muted: #555555;
  --nav-link-hover-bg: rgba(0, 0, 0, 0.05);
  --nav-toggler-border: #e2e8f0;

  /* Layout */
  --container-max: 1400px;
  --navbar-h: 72px;

  /* ── Extended Radius Scale ── */
  --radius-2xs: 2px;
  --radius-xs: 6px;
  --radius-ml: 10px;
  --radius-2xl: 16px;

  /* ── Status Colors ── */
  --clr-success: #22c55e;
  --clr-success-dim: #16a34a;
  --clr-success-dark: #198754;
  --clr-success-bg: rgba(34, 197, 94, 0.08);
  --clr-success-bg-strong: rgba(34, 197, 94, 0.1);
  --clr-success-bg-solid: #f0fdf4;
  --clr-success-border: rgba(34, 197, 94, 0.25);
  --clr-success-border-strong: #bbf7d0;
  --clr-success-glow: rgba(34, 197, 94, 0.6);

  --clr-error: #ef4444;
  --clr-error-dim: #b91c1c;
  --clr-error-bg: rgba(239, 68, 68, 0.08);
  --clr-error-bg-strong: rgba(239, 68, 68, 0.1);
  --clr-error-bg-solid: #fef2f2;
  --clr-error-border: rgba(239, 68, 68, 0.25);
  --clr-error-border-strong: #fecaca;
  --clr-error-focus: rgba(239, 68, 68, 0.12);

  --clr-info: #60a5fa;
  --clr-info-bg: rgba(96, 165, 250, 0.1);
  --clr-info-border: rgba(96, 165, 250, 0.25);
  --clr-warning: #f59e0b;

  /* ── Accent Tint Scale ── */
  --clr-accent-03: rgba(2, 123, 255, 0.03);
  --clr-accent-035: rgba(2, 123, 255, 0.035);
  --clr-accent-04: rgba(2, 123, 255, 0.04);
  --clr-accent-05: rgba(2, 123, 255, 0.05);
  --clr-accent-06: rgba(2, 123, 255, 0.06);
  --clr-accent-07: rgba(2, 123, 255, 0.07);
  --clr-accent-10: rgba(2, 123, 255, 0.1);
  --clr-accent-12: rgba(2, 123, 255, 0.12);
  --clr-accent-20: rgba(2, 123, 255, 0.2);
  --clr-accent-30: rgba(2, 123, 255, 0.3);
  --clr-accent-35: rgba(2, 123, 255, 0.35);

  /* ── Overlays ── */
  --overlay-07: rgba(0, 0, 0, 0.07);
  --overlay-30: rgba(0, 0, 0, 0.3);
  --overlay-50: rgba(0, 0, 0, 0.5);
  --overlay-75: rgba(0, 0, 0, 0.75);
  --overlay-white-08: rgba(255, 255, 255, 0.08);
  --pulse-glow: rgba(255, 255, 255, 0.6);

  /* ── Extended Shadows ── */
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-modal: 0 10px 30px rgba(0, 0, 0, 0.25);
  --shadow-lift: rgba(0, 0, 0, 0.25);
  --shadow-accent-btn: rgba(13, 110, 253, 0.2);
  --footer-social-hover-bg: rgba(255, 255, 255, 0.137);
  --shadow-accent-btn-hover: rgba(13, 110, 253, 0.3);

  /* ── Social Brand Colors ── */
  --social-fb: #3b5998;
  --social-li: #0077b5;
  --social-wa: #25d366;
  --social-wa-dark: #1da851;
  --social-gh: #171515;
  --social-ig-gradient: linear-gradient(
    45deg,
    #feda75 0%,
    #fa7e1e 25%,
    #d62976 50%,
    #962fbf 75%,
    #4f5bd5 100%
  );

  /* ── Megamenu / Dark Dropdown Palette ── */
  --mm-bg: #1a1a1a;
  --mm-border: #2a2a2a;
  --mm-text: #dbdbdb;
  --mm-link-hover-bg: #222;
  --mm-link-hover-text: #f0ece0;
  --mm-icon-bg: #222;
  --mm-icon-border: #333;
  --mm-icon-text: #888;
  --mm-panel-bg: rgba(12, 12, 12, 0.98);
  --mm-mobmega-bg: #161616;

  /* ── Scrolled-Nav / Light-Dropdown-State tokens ── */
  --nav-text-scrolled-muted: #444444;
  --nav-icon-muted: #666666;
  --clr-text-disabled: #aaaaaa;
  --clr-bg-hover-strong: #dcebff;
  --scrollbar-track: #f5f3ee;

  /* ── Brand-Card  ── */
  --br-card-bg: #2d2d2d;
  --br-card-border: #3a3a3a;
  --br-card-text: #eeeeee;

  /* ── Page Hero Shape/Gradient ── */
  --page-hero-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  --page-hero-shape-color: var(--clr-accent);
  --page-hero-shape-clip: polygon(100% 0, 100% 0, 100% 100%, 0% 100%);

  /* ── Order/Status Badge Text ── */
  --clr-badge-text-a: #272727;
  --clr-badge-text-b: #141414;

  /* ── Nav / Hero translucency tokens ── */
  --nav-bg-strong: rgba(249, 250, 251, 0.98);
  --hero-fade-92: rgba(249, 250, 251, 0.92);
  --hero-fade-55: rgba(249, 250, 251, 0.55);
  --hero-fade-10: rgba(249, 250, 251, 0.1);
  --hero-fade-0: rgba(249, 250, 251, 0);

  /* ── WhatsApp Float Shadows ── */
  --shadow-whatsapp: rgba(37, 211, 102, 0.3);
  --shadow-whatsapp-hover: rgba(37, 211, 102, 0.4);

  /* ── Extra Status/Accent Tints ── */
  --clr-success-glow-strong: rgba(34, 197, 94, 0.35);
  --clr-accent-15: rgba(2, 123, 255, 0.15);
  --clr-accent-08: rgba(2, 123, 255, 0.08);
  --shadow-social: 0 5px 15px rgba(0, 0, 0, 0.1);
  --clr-text-slate: #6b7280;

  /* ── Shine/Shimmer Overlay Steps ── */
  --shine-35: rgba(255, 255, 255, 0.35);
  --shine-25: rgba(255, 255, 255, 0.25);
  --shine-12: rgba(255, 255, 255, 0.12);
  --shine-0: rgba(255, 255, 255, 0);
}