/*
 * ═══════════════════════════════════════════════════════════════
 * COREDEVEX — CSS CUSTOM PROPERTIES
 * Single source of truth for all design tokens.
 * ═══════════════════════════════════════════════════════════════
 */

:root {

  /* ── Colour Palette — Dark ──
     Foundation shifted from saturated navy (#080E1C) to desaturated
     warm midnight (#111522). Less blue competition with teal accent;
     teal now reads as the sole colour expression in dark sections. */
  --navy-deep:          #111522;
  --navy-base:          #111522;
  --navy-surface:       rgba(255, 255, 255, 0.05);
  --navy-mid:           #111522;
  --navy-light:         #1A1F34;
  --navy-muted:         #242940;
  --icon-container:     rgba(255, 255, 255, 0.08);

  /* ── Colour Palette — Light ── */
  --canvas:             #FAFBFD;
  --surface-light:      #FFFFFF;
  --surface-alt:        #F0F4FA;

  /* ── Foreground — Dark context ── */
  --cdx-white:          #F4F6FA;
  --cdx-mist:           #A8BAD0;
  --cdx-ghost:          #6A7F99;

  /* ── Brand Accent — vibrant teal, elevated from L=30 to L=72 ──
     #00C4A8 pops clearly against the desaturated midnight foundation.
     Previous value #0B8F7A was absorbed by the navy (same luminosity band). */
  --cdx-accent:         #00C4A8;
  --cdx-hover:          #00A88F;
  --accent-tint:        #E6F9F6;
  --platform-blue:      #1A50C8;
  --accent-border:      rgba(0, 196, 168, 0.22);
  --accent-glow:        rgba(0, 196, 168, 0.16);

  /* ── Supporting ── */
  --cdx-success:        #10B981;
  --cdx-error:          #EF4444;

  /* ── Light section palette ── */
  --light-bg:           var(--canvas);
  --light-bg-deep:      var(--surface-alt);
  --light-surface:      var(--surface-light);
  --light-surface-mid:  #F4F6F9;
  --light-border:       #E2E8F0;
  --light-border-hover: #C8D5E4;
  --light-text:         #0D1117;
  --light-muted:        #3D5166;
  --light-ghost:        #7A8EA0;

  /* ── Semantic colour aliases (dark default) ── */
  --color-bg:           var(--navy-base);
  --color-bg-deep:      var(--navy-deep);
  --color-surface:      var(--navy-surface);
  --color-surface-mid:  var(--navy-light);
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.16);
  --color-text:         var(--cdx-white);
  --color-text-muted:   var(--cdx-mist);
  --color-text-ghost:   var(--cdx-ghost);
  --color-accent:       var(--cdx-accent);
  --color-accent-hover: var(--cdx-hover);
  --color-success:      var(--cdx-success);

  /* ── Tagline colour ── */
  --cdx-tagline:        #5A7FA0;

  /* ── Typography ── */
  --font-display: 'Plus Jakarta Sans', 'DM Serif Display', Georgia, serif;
  --font-sans:    'Inter', 'DM Sans', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Type Scale ── */
  --text-hero:    80px;
  --text-display: 56px;
  --text-h2:      40px;
  --text-h3:      26px;
  --text-h4:      18px;
  --text-body-lg: 18px;
  --text-body:    16px;
  --text-small:   14px;
  --text-caption: 11px;
  --text-metric:  56px;

  /* ── Spacing ── */
  --section-pad-desktop: 120px;
  --section-pad-tablet:  80px;
  --section-pad-mobile:  64px;
  --container-max:       1280px;
  --container-pad:       5vw;
  --card-pad:            32px;
  --card-gap:            16px;
  --nav-height:          72px;
  --bar-height:          40px;

  /* ── Borders ── */
  --border-dark:        rgba(255, 255, 255, 0.08);
  --border-dark-hover:  rgba(255, 255, 255, 0.16);
  --border-dark-subtle: rgba(255, 255, 255, 0.06);
  --border-accent:      var(--accent-border);

  /* ── Gradient ── */
  --gradient-accent:    linear-gradient(135deg, #00C4A8 0%, #0A5FD8 100%);
  --gradient-hero-glow: radial-gradient(ellipse 80% 60% at 12% 100%, rgba(0,196,168,0.22) 0%, transparent 65%),
                        radial-gradient(ellipse 60% 50% at 88% 10%, rgba(18,80,200,0.16) 0%, transparent 60%);

  /* ── Shadows ── */
  --shadow-card:        0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-card-hover:  0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 28px rgba(0, 0, 0, 0.45),
                        inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --shadow-card-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-nav:         0 1px 0 rgba(255, 255, 255, 0.06);

  /* ── Border Radius ── */
  --radius-ui:   6px;
  --radius-card: 8px;
  --radius-icon: 6px;

  /* ── Motion ── */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-hover:    ease-out;
  --dur-fast:      120ms;
  --dur-base:      150ms;
  --dur-reveal:    500ms;
  --dur-stagger:   80ms;

}

/* Light section overrides — applied via .light-section class on <section> */
.light-section {
  background: var(--canvas);
  --color-bg:           var(--canvas);
  --color-surface:      var(--surface-light);
  --color-surface-mid:  var(--surface-alt);
  --color-border:       var(--light-border);
  --color-border-hover: var(--light-border-hover);
  --color-text:         var(--light-text);
  --color-text-muted:   var(--light-muted);
  --color-text-ghost:   var(--light-ghost);
  --shadow-card:        0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-card-hover:  0 8px 28px rgba(0, 196, 168, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Always respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto  !important;
  }
}