/* ValleyUnit Color Tokens — Evolved Palette
   ============================================
   Real dark sections. Genuine contrast. Same brand blue anchor.
   To change the color scheme: edit ONLY this file.
   All layout + component CSS uses var() refs to these tokens. */

:root {
  /* -- Page -- */
  --page-bg:            #F8FAFC;
  --page-text:          #0F172A;
  --page-text-2:        #475569;
  --page-text-muted:    #94A3B8;

  /* -- Light sections -- */
  --section-bg:         #F8FAFC;
  --section-bg-alt:     #F1F5F9;
  --section-bg-tinted:  #EEF2FF;

  /* -- Dark sections (real contrast) -- */
  --dark-bg:            #0B1120;
  --dark-bg-2:          #111827;
  --dark-bg-surface:    #1E293B;
  --dark-text:          #F1F5F9;
  --dark-text-2:        #94A3B8;
  --dark-text-muted:    #64748B;
  --dark-border:        #1E293B;
  --dark-border-light:  rgba(255, 255, 255, 0.08);

  /* -- Photo-band scrim (layered over --dark-bg #0B1120) --
     Keeps copy legible on top of photography and seats the section
     edges against the neighbouring sections. */
  --scrim-band-v:       linear-gradient(to bottom, rgba(11, 17, 32, 0.62) 0%, rgba(11, 17, 32, 0.30) 45%, rgba(11, 17, 32, 0.72) 100%);

  /* -- Contrast sections (footer, final CTA) -- */
  --contrast-bg:        #020617;
  --contrast-bg-glow:   #0F172A;
  --contrast-text:      #F1F5F9;
  --contrast-text-2:    #94A3B8;
  --contrast-border:    #1E293B;

  /* -- Cards / surfaces -- */
  --card-bg:            #FFFFFF;
  --card-border:        #E2E8F0;
  --card-border-hover:  #94A3B8;
  --card-bg-dark:       rgba(255, 255, 255, 0.05);
  --card-border-dark:   rgba(255, 255, 255, 0.08);
  --card-border-dark-hover: rgba(255, 255, 255, 0.15);

  /* -- Primary accent (logo blue) -- */
  --accent:             #3661C1;
  --accent-hover:       #2E4EBB;
  --accent-darker:      #243F9E;
  --accent-light:       #5B7FD6;
  --accent-text:        #FFFFFF;
  --accent-subtle:      rgba(54, 97, 193, 0.12);
  --accent-subtle-2:    rgba(54, 97, 193, 0.06);
  --accent-glow:        rgba(54, 97, 193, 0.25);
  --accent-glow-strong: rgba(54, 97, 193, 0.40);

  /* -- Secondary accent (teal — badges, highlights, checks) -- */
  --accent-2:           #0D9488;
  --accent-2-hover:     #0F766E;
  --accent-2-subtle:    rgba(13, 148, 136, 0.12);
  --accent-2-text:      #FFFFFF;
  --accent-2-light:     #2DD4BF;

  /* -- Tertiary accent (violet — pro tier, premium badges only) -- */
  --accent-3:           #7C3AED;
  --accent-3-hover:     #6D28D9;
  --accent-3-subtle:    rgba(124, 58, 237, 0.12);

  /* -- Status -- */
  --ok:                 #059669;
  --ok-subtle:          rgba(5, 150, 105, 0.12);
  --err:                #DC2626;
  --err-subtle:         rgba(220, 38, 38, 0.12);

  /* -- Borders -- */
  --border:             #E2E8F0;
  --border-light:       #F1F5F9;
  --border-hover:       #94A3B8;
  --border-focus:       var(--accent);

  /* -- Navigation -- */
  --nav-bg-scrolled:    rgba(248, 250, 252, 0.92);
  --nav-border-scrolled:#E2E8F0;
  --nav-text:           #334155;
  --nav-text-hover:     #0F172A;

  /* -- Featured card (pricing) -- */
  --featured-bg:        #EEF2FF;
  --featured-border:    var(--accent);

  /* -- Auth pages -- */
  --auth-bg:            #0B1120;             /* matches --dark-bg */
  --auth-surface:       #111827;             /* matches --dark-bg-2 */
  --auth-border:        #1E293B;             /* matches --dark-border */
  --auth-text:          #F1F5F9;             /* matches --dark-text */
  --auth-text-2:        #94A3B8;             /* matches --dark-text-2 */

  /* -- Gradient tokens -- */
  --grad-hero:          radial-gradient(ellipse 80% 60% at 50% 120%, rgba(54, 97, 193, 0.15) 0%, transparent 70%);
  --grad-dark-glow:     radial-gradient(ellipse 60% 50% at 50% 100%, rgba(54, 97, 193, 0.12) 0%, transparent 60%);
  --grad-cta:           radial-gradient(ellipse at 50% 100%, #0F172A 0%, #020617 70%);
}