/* ============================================================
   theme.css — CSS custom properties: dark (default) + light
   Single Responsibility: only CSS variables live here
   ============================================================ */

:root {
  /* ---- Brand (always constant) ---- */
  --primary:        #2F80ED;
  --primary-dark:   #1565C0;
  --primary-light:  #56CCF2;

  /* ---- Dark sections (hero, stats, portfolio, footer) ---- */
  --ds-bg:           #0D1B2A;
  --ds-bg-alt:       #152438;
  --ds-bg-card:      rgba(255,255,255,.04);
  --ds-text:         #FFFFFF;
  --ds-text-dim:     rgba(255,255,255,.65);
  --ds-text-muted:   rgba(255,255,255,.42);
  --ds-border:       rgba(255,255,255,.08);
  --ds-label:        var(--primary-light);
  --ds-label-line:   var(--primary-light);

  /* ---- Light sections (services, segments, team, contact) ---- */
  --ls-bg:           #FFFFFF;
  --ls-bg-alt:       #F0F6FF;
  --ls-text:         #1A2A4A;
  --ls-text-muted:   #6B7A99;
  --ls-border:       rgba(47,128,237,.13);

  /* ---- Navbar ---- */
  --nav-scrolled-bg: rgba(13,27,42,.97);
  --nav-link:        rgba(255,255,255,.82);
  --nav-link-hover:  #FFFFFF;
  --nav-toggler-stroke: rgba(255,255,255,.85);

  /* ---- Contact info card (dark card inside light section) ---- */
  --ci-card-bg:    #0D1B2A;

  /* ---- Contact form card ---- */
  --cf-card-bg:    #FFFFFF;
  --cf-label:      #1A2A4A;
  --cf-input-bg:   #FFFFFF;
  --cf-input-text: #1A2A4A;
  --cf-input-border: rgba(47,128,237,.15);
  --cf-placeholder: rgba(107,122,153,.7);

  /* ---- Clients section ---- */
  --clients-bg:    #FFFFFF;

  /* ---- Shared ---- */
  --shadow:        0 8px 40px rgba(13,27,42,.14);
  --shadow-blue:   0 8px 32px rgba(47,128,237,.25);
  --radius:        8px;
  --radius-lg:     16px;
  --transition:    .3s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   Light theme overrides
   ============================================================ */
[data-theme="light"] {
  --ds-bg:           #1A3A6A;
  --ds-bg-alt:       #1D4484;
  --ds-bg-card:      rgba(255,255,255,.08);
  --ds-text:         #FFFFFF;
  --ds-text-dim:     rgba(255,255,255,.72);
  --ds-text-muted:   rgba(255,255,255,.48);
  --ds-border:       rgba(255,255,255,.12);
  --ds-label:        #A8CFFF;
  --ds-label-line:   #A8CFFF;

  --ls-bg:           #FFFFFF;
  --ls-bg-alt:       #EEF4FF;
  --ls-text:         #1A2A4A;
  --ls-text-muted:   #556080;
  --ls-border:       rgba(47,128,237,.15);

  --nav-scrolled-bg: rgba(255,255,255,.97);
  --nav-link:        rgba(30,50,90,.82);
  --nav-link-hover:  #1A2A4A;
  --nav-toggler-stroke: rgba(30,50,90,.85);

  --ci-card-bg:    #1A3A6A;

  --cf-card-bg:    #FFFFFF;
  --cf-label:      #1A2A4A;
  --cf-input-bg:   #F8FAFF;
  --cf-input-text: #1A2A4A;
  --cf-input-border: rgba(47,128,237,.2);
  --cf-placeholder: rgba(85,96,128,.6);

  --clients-bg:    #F5F8FF;

  --shadow:        0 8px 40px rgba(13,27,42,.09);
  --shadow-blue:   0 8px 32px rgba(47,128,237,.2);
}