/* ============================================================
   JANJUA COMPANIES — GLOBAL THEME VARIABLES
   Dark by default; light follows browser (prefers-color-scheme)
   ============================================================ */

:root {
  color-scheme: dark;

  /* ─── BRAND COLORS ─────────────────────────────────────── */
  --color-primary:        #00d4ff;
  --color-primary-glow:   #00d4ff40;
  --color-secondary:      #c9a84c;
  --color-secondary-glow: #c9a84c30;
  --color-accent:         #7c3aed;
  --color-accent-glow:    #7c3aed40;
  --color-danger:         #ff4757;
  --color-success:        #2ed573;

  /* ─── BACKGROUND LAYERS ────────────────────────────────── */
  --bg-base:              #04040a;
  --bg-surface:           #080810;
  --bg-elevated:          #0e0e1a;
  --bg-glass:             rgba(255, 255, 255, 0.04);
  --bg-glass-border:      rgba(255, 255, 255, 0.08);

  /* ─── TEXT COLORS ──────────────────────────────────────── */
  --text-heading:         #f0f4ff;
  --text-body:            #a8b3cf;
  --text-muted:           #5a6482;
  --text-on-primary:      #04040a;
  --text-on-gradient:     #ffffff;
  --text-on-gold-btn:     #0a0a0f;
  --color-danger-text:    #fca5a5;
  --color-success-text:   #6ee7b7;
  --color-danger-border:  #ef4444;

  /* ─── UI SEMANTIC TOKENS ───────────────────────────────── */
  --nav-scrolled-bg:      rgba(4, 4, 10, 0.8);
  --nav-mobile-bg:        rgba(4, 4, 10, 0.98);
  --nav-scrolled-shadow:  0 4px 40px rgba(0, 0, 0, 0.4);
  --hero-grid-line:       rgba(255, 255, 255, 0.02);
  --noise-opacity:        0.4;
  --team-overlay:         linear-gradient(to top, rgba(4, 4, 10, 0.9) 0%, transparent 100%);
  --work-card-overlay:    linear-gradient(to top, rgba(4, 4, 10, 0.9) 0%, transparent 60%);
  --chip-bg:              rgba(255, 255, 255, 0.03);
  --badge-bg:             rgba(4, 8, 20, 0.72);
  --badge-border:         rgba(255, 255, 255, 0.08);
  --scroll-top-border:    rgba(255, 255, 255, 0.12);
  --btn-shine:            rgba(255, 255, 255, 0.08);
  --grad-cyan-end:        #ffffff;
  --particle-line:        rgba(0, 212, 255, 0.08);
  --site-particles-opacity: 0.38;
  --particle-dot-alpha:   0.22;
  --particle-line-alpha:  0.032;
  --site-grid-opacity:    0.55;

  /* ─── MEGAMENU (solid — no see-through overlap) ───────────── */
  --megamenu-bg:          var(--bg-surface);
  --megamenu-border:      var(--bg-glass-border);
  --megamenu-shadow:      0 28px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --megamenu-card-bg:     var(--bg-elevated);
  --megamenu-card-border: var(--bg-glass-border);
  --megamenu-card-hover-border: var(--color-primary-glow);
  --megamenu-card-hover-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --megamenu-icon-bg:     var(--bg-elevated);
  --megamenu-icon-border: var(--bg-glass-border);
  --megamenu-viewall-bg:  var(--color-primary-glow);
  --megamenu-empty-border: var(--bg-glass-border);
  --megamenu-scrim:       rgba(4, 4, 10, 0.55);

  /* ─── TYPOGRAPHY ───────────────────────────────────────── */
  --font-display:         'Sora', 'Segoe UI', sans-serif;
  --font-body:            'Manrope', 'Segoe UI', sans-serif;
  --font-mono:            'JetBrains Mono', 'Consolas', monospace;

  --size-xs:   0.75rem;
  --size-sm:   0.875rem;
  --size-base: 1rem;
  --size-md:   1.125rem;
  --size-lg:   1.375rem;
  --size-xl:   1.75rem;
  --size-2xl:  2.25rem;
  --size-3xl:  3rem;
  --size-4xl:  4rem;
  --size-5xl:  5.5rem;
  --size-6xl:  7rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;
  --weight-black:  800;

  --leading-tight:  1.15;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ─── SPACING ──────────────────────────────────────────── */
  --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:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1.25rem;
  --radius-xl:   2rem;
  --radius-full: 9999px;

  --border-subtle: 1px solid var(--bg-glass-border);
  --border-glow:   1px solid var(--color-primary-glow);

  /* ─── SHADOWS & GLOWS ──────────────────────────────────── */
  --shadow-card:   0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow:   0 0 40px var(--color-primary-glow);
  --shadow-gold:   0 0 40px var(--color-secondary-glow);
  --shadow-violet: 0 0 40px var(--color-accent-glow);

  /* ─── TRANSITIONS ──────────────────────────────────────── */
  --ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   200ms;
  --duration-base:   400ms;
  --duration-slow:   700ms;
  --duration-xslow: 1200ms;

  /* ─── LAYOUT ────────────────────────────────────────────── */
  --container-max: 1600px;
  --nav-height:    80px;
  --section-pad-y: var(--space-32);

  /* ─── Z-INDEX SCALE ─────────────────────────────────────── */
  --z-behind:  -1;
  --z-base:     0;
  --z-raised:  10;
  --z-overlay: 50;
  --z-nav:    100;
  --z-modal:  200;
  --z-toast:  300;
}

/* ─── LIGHT MODE (browser / OS preference) ───────────────── */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --color-primary:        #0095c4;
    --color-primary-glow:   #0095c428;
    --color-secondary:      #9a7b2e;
    --color-secondary-glow: #9a7b2e28;
    --color-accent:         #6d28d9;
    --color-accent-glow:    #6d28d928;

    --bg-base:              #f5f7ff;
    --bg-surface:           #ffffff;
    --bg-elevated:          #eef1fb;
    --bg-glass:             rgba(255, 255, 255, 0.78);
    --bg-glass-border:      rgba(10, 14, 40, 0.1);

    --text-heading:         #0a0a1a;
    --text-body:            #3a4060;
    --text-muted:           #6b728e;
    --text-on-primary:      #ffffff;
    --text-on-gradient:     #ffffff;
    --text-on-gold-btn:     #1a1408;
    --color-danger-text:    #b91c1c;
    --color-success-text:   #047857;
    --color-danger-border:  #dc2626;

    --nav-scrolled-bg:      rgba(255, 255, 255, 0.9);
    --nav-mobile-bg:        rgba(255, 255, 255, 0.98);
    --nav-scrolled-shadow:  0 4px 24px rgba(15, 23, 42, 0.1);
    --hero-grid-line:       rgba(10, 14, 40, 0.06);
    --noise-opacity:        0.12;
    --team-overlay:         linear-gradient(to top, rgba(245, 247, 255, 0.95) 0%, transparent 100%);
    --work-card-overlay:    linear-gradient(to top, rgba(10, 14, 40, 0.72) 0%, transparent 60%);
    --chip-bg:              rgba(10, 14, 40, 0.04);
    --badge-bg:             rgba(255, 255, 255, 0.92);
    --badge-border:         rgba(10, 14, 40, 0.1);
    --scroll-top-border:    rgba(10, 14, 40, 0.12);
    --btn-shine:            rgba(255, 255, 255, 0.45);
    --grad-cyan-end:        var(--color-primary);
    --particle-line:        rgba(0, 149, 196, 0.1);
    --site-particles-opacity: 0.32;
    --particle-dot-alpha:   0.18;
    --particle-line-alpha:  0.024;
    --site-grid-opacity:    0.45;

    --shadow-card:   0 8px 32px rgba(15, 23, 42, 0.08);
    --shadow-glow:   0 0 32px var(--color-primary-glow);
    --shadow-gold:   0 0 32px var(--color-secondary-glow);
    --shadow-violet: 0 0 32px var(--color-accent-glow);

    --megamenu-bg:          var(--bg-surface);
    --megamenu-border:      var(--bg-glass-border);
    --megamenu-shadow:      0 24px 56px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(10, 14, 40, 0.08);
    --megamenu-card-bg:     var(--bg-elevated);
    --megamenu-card-border: var(--bg-glass-border);
    --megamenu-card-hover-border: var(--color-primary-glow);
    --megamenu-card-hover-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    --megamenu-icon-bg:     #ffffff;
    --megamenu-icon-border: var(--bg-glass-border);
    --megamenu-viewall-bg:  var(--color-primary-glow);
    --megamenu-empty-border: var(--bg-glass-border);
    --megamenu-scrim:       rgba(10, 14, 40, 0.35);
  }
}

/* ─── RESPONSIVE BREAKPOINTS ─────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --container-max: 100%;
    --nav-height: 70px;
    --section-pad-y: var(--space-24);
    --size-4xl: 3rem;
    --size-5xl: 4rem;
    --size-6xl: 5rem;
  }
}

@media (max-width: 768px) {
  :root {
    --nav-height: 60px;
    --section-pad-y: var(--space-16);
    --size-3xl: 2.25rem;
    --size-4xl: 2.5rem;
    --size-5xl: 3rem;
    --size-6xl: 3.5rem;
    --space-8: 1.5rem;
    --space-10: 2rem;
    --space-12: 2.5rem;
    --space-16: 3rem;
    --space-20: 3.5rem;
    --space-24: 4rem;
    --space-32: 5rem;
  }
}

@media (max-width: 480px) {
  :root {
    --size-2xl: 1.75rem;
    --size-3xl: 2rem;
    --size-4xl: 2.25rem;
    --size-5xl: 2.5rem;
    --size-6xl: 2.75rem;
  }
}

/* ─── RESPONSIVE MEDIA (protect logos & cover images) ───── */
.img-icon {
  display: block;
  flex: 0 0 auto;
  max-width: none;
  width: auto;
  height: auto;
  object-fit: contain;
}

.media-fill {
  overflow: hidden;
}

.media-fill > img,
.media-fill > picture,
.media-fill > video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

@media (max-width: 768px) {
  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-row .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .btn-row {
    gap: var(--space-3);
  }
}