/* ==========================================================================
   Design Tokens — www.state3.co.nz
   --------------------------------------------------------------------------
   Migrated to the depend.state3.it visual system (cyan accent, dark navy).
   Source of truth: site/sandbox/home-depend-style.html inline <style>.
   ========================================================================== */

:root {
  /* ---- Core palette ---- */
  --color-primary:        #0A0F1E;   /* deep navy — primary background */
  --color-primary-light:  #111827;   /* secondary dark surface */
  --color-primary-mid:    #1E293B;   /* mid-dark surface */

  --color-accent:         #00C2FF;   /* cyan — primary accent */
  --color-accent-hover:   #33D1FF;
  --color-accent-soft:    rgba(0, 194, 255, 0.08);
  --color-accent-muted:   rgba(0, 194, 255, 0.15);
  --color-accent-dark:    #0099CC;   /* cyan on light backgrounds */

  /* Text palette */
  --color-text-white:     #FFFFFF;
  --color-text-light:     #94A3B8;
  --color-text-muted:     #64748B;

  /* Light-surface tokens */
  --color-surface-light:  #F8FAFC;
  --color-surface-white:  #FFFFFF;
  --color-text-dark:      #0F172A;
  --color-text-body:      #334155;
  --color-text-subtle:    #64748B;
  --color-border-light:   #E2E8F0;

  --color-border-dark:    rgba(255, 255, 255, 0.08);
  --color-border-strong:  rgba(255, 255, 255, 0.14);

  --color-warning:        #FFB020;
  --color-critical:       #FF5C5C;
  --color-success:        #22C55E;

  /* ---- Shadows ---- */
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.20);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.30);
  --shadow-xl:  0 20px 40px rgba(0, 0, 0, 0.40);
  --glow-accent: 0 0 24px rgba(0, 194, 255, 0.35);

  /* ---- Border radii ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ---- Spacing scale (4px base) ---- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ---- Layout ---- */
  --container-max:     1200px;
  --container-padding: var(--space-6);
  --section-py:        var(--space-20);

  /* ---- Typography ---- */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-h1:      clamp(2.5rem, 5vw, 3.75rem);
  --text-h2:      clamp(1.875rem, 3.5vw, 2.5rem);
  --text-h3:      1.5rem;
  --text-h4:      1.125rem;
  --text-body:    1rem;
  --text-body-lg: 1.125rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.12em;

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

  /* ---- Old-token aliases (preserve existing page references) ---- */
  /* Inline styles across HTML pages reference these names */
  --bg-1:           var(--color-primary);
  --bg-2:           var(--color-primary-light);
  --ink:            var(--color-text-white);
  --mute:           var(--color-text-light);
  --ink-dark:       var(--color-text-dark);
  --ink-body:       var(--color-text-body);
  --ink-subtle:     var(--color-text-subtle);
  --surface-light:  var(--color-surface-light);
  --surface-white:  var(--color-surface-white);
  --border-dark:    var(--color-border-dark);
  --border-light:   var(--color-border-light);
  /* c1–c5 aliased: cyan replaces the old multi-colour palette */
  --c1:       var(--color-accent);
  --c2:       var(--color-accent);
  --c3:       var(--color-accent);
  --c4:       var(--color-accent);
  --c5:       var(--color-accent);
  --c1-hover: var(--color-accent-hover);
  --c2-hover: var(--color-accent-hover);
  --shadow-glow: var(--glow-accent);
}

/* ---- Section context variables (consumed by preserved components) ---- */

/* Dark section (default body) */
.section--dark {
  --section-bg:       var(--color-primary);
  --section-text:     var(--color-text-white);
  --section-text-sub: var(--color-text-light);
  --section-border:   var(--color-border-dark);
  --card-bg:          rgba(255,255,255,.03);
  --card-border:      var(--color-border-dark);
}

.section--mid {
  --section-bg:       var(--color-primary-light);
  --section-text:     var(--color-text-white);
  --section-text-sub: var(--color-text-light);
  --section-border:   var(--color-border-dark);
  --card-bg:          rgba(255,255,255,.04);
  --card-border:      var(--color-border-dark);
}

/* Keep .section--dark-alt as alias for --mid for backwards compat */
.section--dark-alt {
  --section-bg:       var(--color-primary-light);
  --section-text:     var(--color-text-white);
  --section-text-sub: var(--color-text-light);
  --section-border:   var(--color-border-dark);
  --card-bg:          rgba(255,255,255,.04);
  --card-border:      var(--color-border-dark);
}

/* Light section */
.section--light {
  --section-bg:       var(--color-surface-light);
  --section-text:     var(--color-text-dark);
  --section-text-sub: var(--color-text-body);
  --section-border:   var(--color-border-light);
  --card-bg:          var(--color-surface-white);
  --card-border:      var(--color-border-light);
}

.section--light-alt {
  --section-bg:       var(--color-surface-white);
  --section-text:     var(--color-text-dark);
  --section-text-sub: var(--color-text-body);
  --section-border:   var(--color-border-light);
  --card-bg:          var(--color-surface-light);
  --card-border:      var(--color-border-light);
}