/* ==========================================================================
   Design Tokens — State3 Depend
   ========================================================================== */

:root {
  /* ---- Primary palette ---- */
  --color-primary:        #0A0F1E;
  --color-primary-light:  #111827;
  --color-primary-mid:    #1E293B;

  /* ---- Accent ---- */
  --color-accent:         #00C2FF;
  --color-accent-hover:   #33D1FF;
  --color-accent-muted:   rgba(0, 194, 255, 0.15);
  --color-accent-dark:    #0099CC;

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

  /* ---- Text on light ---- */
  --color-text-dark:      #0F172A;
  --color-text-body:      #334155;
  --color-text-subtle:    #64748B;

  /* ---- Light-section backgrounds ---- */
  --color-surface-light:  #F8FAFC;
  --color-surface-lighter:#F1F5F9;
  --color-surface-white:  #FFFFFF;

  /* ---- Borders ---- */
  --color-border-dark:    rgba(255, 255, 255, 0.08);
  --color-border-light:   #E2E8F0;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px  2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px  6px rgba(0, 0, 0, 0.07);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.15);

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

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

  /* ---- 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;
  --space-32:  128px;

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

  /* ---- Section padding ---- */
  --section-py:        var(--space-12);  /* 48px mobile-first */
  --section-py-lg:     var(--space-20);  /* 80px desktop */

  /* ---- Typography ---- */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --text-h1:      3.5rem;
  --text-h2:      2.5rem;
  --text-h3:      1.75rem;
  --text-h4:      1.25rem;
  --text-body:    1rem;
  --text-body-lg: 1.125rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;

  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;
  --leading-loose:   1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.01em;
}

/* ---------- Dark-section variables ---------- */
.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:          var(--color-primary-light);
  --card-border:      var(--color-border-dark);
}

/* Alternate dark shade */
.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:          var(--color-primary-mid);
  --card-border:      var(--color-border-dark);
}

/* ---------- Light-section variables ---------- */
.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);
}