/* ============================================================
   Lancephase — Colors
   From the Brand Identity Guidelines (v1.0, 2026).
   Primary:   white #FFFFFF · black #000000 · blue #1291F9
   Secondary: #4C4C4C · #AFAFAF · light blue #75C6FC
   ============================================================ */
:root {
  /* ---- Brand primaries ---- */
  --lp-blue:        #1291F9;  /* signature electric blue — the one accent */
  --lp-black:       #000000;
  --lp-white:       #FFFFFF;

  /* ---- Secondary / support ---- */
  --lp-blue-light:  #75C6FC;  /* tints, secondary accents, charts */
  --lp-gray-700:    #4C4C4C;  /* strong gray — secondary text on light */
  --lp-gray-400:    #AFAFAF;  /* muted gray — captions, borders */

  /* ---- Blue ramp (derived from #1291F9 for hovers / surfaces) ---- */
  --lp-blue-50:     #E7F3FE;
  --lp-blue-100:    #CFE8FE;
  --lp-blue-200:    #A6D4FC;
  --lp-blue-300:    #75C6FC;  /* == blue-light */
  --lp-blue-400:    #3FA8FA;
  --lp-blue-500:    #1291F9;  /* == brand blue */
  --lp-blue-600:    #0B74D6;  /* hover / pressed */
  --lp-blue-700:    #0A5CA8;
  --lp-blue-900:    #06335c;

  /* ---- Neutral ramp (cool, near-black ink) ---- */
  --lp-ink:         #0B1220;  /* near-black brand ink for headings on light */
  --lp-ink-2:       #1A2336;  /* dark navy surface (footer, dashboards) */
  --lp-gray-900:    #16202F;
  --lp-gray-800:    #283448;
  --lp-gray-600:    #5A6473;
  --lp-gray-500:    #7B8595;
  --lp-gray-300:    #C9D1DC;
  --lp-gray-200:    #E2E8F0;
  --lp-gray-100:    #EEF2F7;
  --lp-gray-50:     #F6F8FB;

  /* ---- Semantic status ---- */
  --lp-success:     #1F9D63;
  --lp-warning:     #E8A317;
  --lp-danger:      #E0413B;
  --lp-info:        var(--lp-blue-500);

  /* ---- Brand gradient (logo / hero washes) ---- */
  --lp-gradient-blue: linear-gradient(135deg, #75C6FC 0%, #1291F9 55%, #0B74D6 100%); /* @kind color */
  --lp-gradient-dark: linear-gradient(160deg, #1A2336 0%, #0B1220 100%); /* @kind color */

  /* ============================================================
     Semantic aliases — reference THESE in components
     ============================================================ */
  --color-accent:           var(--lp-blue-500);
  --color-accent-hover:      var(--lp-blue-600);
  --color-accent-soft:       var(--lp-blue-50);
  --color-accent-2:          var(--lp-blue-light);

  --text-strong:             var(--lp-ink);     /* headings */
  --text-body:               var(--lp-gray-800);/* paragraph copy */
  --text-muted:              var(--lp-gray-500);/* captions, meta */
  --text-on-accent:          var(--lp-white);
  --text-on-dark:            var(--lp-white);
  --text-on-dark-muted:      #9FB0C6;
  --text-link:               var(--lp-blue-600);

  --surface-page:            var(--lp-white);
  --surface-subtle:          var(--lp-gray-50);
  --surface-card:            var(--lp-white);
  --surface-dark:            var(--lp-ink-2);
  --surface-inverse:         var(--lp-ink);
  --surface-nav:             rgba(255,255,255,0.82); /* sticky translucent header */
  --surface-track:           var(--lp-gray-100);     /* usage bars, icon chips */

  --border-subtle:           var(--lp-gray-200);
  --border-default:          var(--lp-gray-300);
  --border-strong:           var(--lp-gray-400);
  --border-focus:            var(--lp-blue-500);

  /* ============================================================
     Band aliases — full-bleed "band" sections (WHY / process /
     final CTA). These were authored dark-first; routing them through
     tokens lets the SAME markup flip with the theme. Light values
     here read as a gentle tonal break; the dark overrides in
     themes.css restore the original navy band + light-on-dark text.
     ============================================================ */
  --band-bg:                 var(--surface-subtle);   /* gentle tonal break, not a dark island */
  --band-ink:                var(--text-strong);      /* headings on band */
  --band-body:               var(--text-body);        /* body copy on band */
  --band-muted:              var(--text-muted);       /* secondary copy on band */
  --band-eyebrow:            var(--color-accent);      /* kicker — readable blue on light */
  --band-line:               var(--border-subtle);    /* faint hairline / divider */
  --band-line-2:             var(--border-default);    /* stronger hairline (markers, chips) */
  --band-chip-bg:            var(--surface-card);      /* marker / chip surface on band */
  --band-ring:               rgba(18,145,249,0.35);    /* accent ring — step badges (direct rgba; no color-mix) */
  --band-wash:               rgba(18,145,249,0.06);    /* faint accent wash — ghost-button hover */

  /* Danger text tuned for >=4.5:1 on light surfaces (form validation). */
  --danger-text:             #C62828;
}