/* ============================================================
   DOCTECQ TECHNOLOGIES — Premium Design System
   Light-first editorial aesthetic
   ============================================================ */

:root {
  /* ── Brand Palette ── */
  --brand-purple: #6C3FE8;
  --brand-blue:   #0A84FF;
  --brand-cyan:   #00D4FF;
  --brand-ink:    #0A0A0F;
  --brand-gold:   #D4AF37;
  --brand-beige:  #C5A059;

  /* ── Gradients ── */
  --gradient-brand:    linear-gradient(135deg, #6C3FE8 0%, #0A84FF 55%, #00D4FF 100%);
  --gradient-brand-h:  linear-gradient(90deg,  #6C3FE8 0%, #0A84FF 55%, #00D4FF 100%);
  --gradient-warm:     linear-gradient(135deg, #FF6B35 0%, #FF0080 100%);

  /* ── Light Mode (Default) ── */
  --bg:            #F7F5F0;
  --bg-2:          #EDEAE3;
  --bg-card:       #FFFFFF;
  --bg-overlay:    rgba(247, 245, 240, 0.97);
  --bg-glass:      rgba(247, 245, 240, 0.85);

  --ink:           #0A0A0F;
  --ink-2:         #2D2D3A;
  --ink-3:         #6B6B7B;
  --ink-4:         #ADADB8;
  --accent:        var(--brand-gold);

  --border:        rgba(10, 10, 15, 0.08);
  --border-strong: rgba(10, 10, 15, 0.16);

  /* Aliases for backwards compat */
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--ink-3);
  --bg-secondary:   var(--bg-2);
  --border-color:   var(--border);
  --color-purple:   var(--brand-purple);
  --color-cyan:     var(--brand-cyan);

  /* ── Typography ── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Type Scale (fluid) ── */
  --text-xs:   clamp(0.625rem,  0.5rem + 0.5vw,  0.75rem);
  --text-sm:   clamp(0.75rem,   0.65rem + 0.4vw,  0.875rem);
  --text-base: clamp(0.9rem,    0.8rem + 0.4vw,   1rem);
  --text-lg:   clamp(1rem,      0.9rem + 0.5vw,   1.25rem);
  --text-xl:   clamp(1.25rem,   1rem + 1vw,       1.75rem);
  --text-2xl:  clamp(1.75rem,   1.25rem + 2vw,    2.75rem);
  --text-3xl:  clamp(2.5rem,    1.5rem + 4vw,     5rem);
  --text-hero: clamp(3.5rem,    2rem + 6vw,       8rem);

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

  /* ── Layout ── */
  --container: min(90rem, 100% - var(--sp-8) * 2);
  --header-h:  5rem;
  --nav-h:     5rem;

  /* ── Border Radius ── */
  --r-sm:   0.375rem;
  --r-md:   0.875rem;
  --r-lg:   1.5rem;
  --r-xl:   2.5rem;
  --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:   0 32px 80px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.08);

  /* ── Easing ── */
  --ease-expo:   cubic-bezier(0.19, 1, 0.22, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.77, 0, 0.18, 1);

  /* ── Duration ── */
  --dur-fast:   150ms;
  --dur-base:   300ms;
  --dur-slow:   600ms;
  --dur-slower: 1000ms;

  /* ── Z-Index ── */
  --z-base:      1;
  --z-card:      10;
  --z-nav:       50;
  --z-overlay:   100;
  --z-cursor:    999;
  --z-preloader: 9999;

  /* backwards compat */
  --ease-out-expo: var(--ease-expo);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-full: var(--r-full);
  --dur-dur: var(--dur-base);
  --shadow-card-var: var(--shadow-card);
  --glow-purple: none;
  --glow-cyan: none;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --bg:            #0A0A0F;
  --bg-2:          #111118;
  --bg-card:       #16161E;
  --bg-overlay:    rgba(10, 10, 15, 0.97);
  --bg-glass:      rgba(10, 10, 15, 0.85);

  --ink:           #F0F0FA;
  --ink-2:         #AEAEC0;
  --ink-3:         #6B6B80;
  --ink-4:         #3A3A50;
  --accent:        var(--brand-beige);

  --border:        rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
  --shadow-xl:   0 32px 80px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.3);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.4), 0 8px 32px rgba(0,0,0,0.5);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0ms;
    --dur-base:   0ms;
    --dur-slow:   0ms;
    --dur-slower: 0ms;
  }
}