/* ============================================================
   DESIGN TOKENS — single source of truth for all colors.
   Loaded BEFORE every other stylesheet. Light + dark themes.
   New pages: just use the tokens; theming is automatic.
   ============================================================ */

:root {
  /* ---------- Brand (theme-invariant) ---------- */
  --c-primary:   #8a00be;
  --c-secondary: #75008c;
  --c-accent:    #eb94cf;
  --c-cyan:      #6dc6cc;
  --c-red:       #d20033;
  --c-coral:     #d3432e;
  --c-yellow:    #ffd200;

  /* RGB triplets (for compositing into rgb(r g b / a)) */
  --rgb-primary: 138 0 190;
  --rgb-accent:  235 148 207;
  --rgb-cyan:    109 198 204;

  /* ---------- Surfaces (theme-aware) ---------- */
  --c-bg:        #faf7fb;   /* page */
  --c-bg-elev:   #ffffff;   /* card */
  --c-bg-glass:  rgba(255, 255, 255, 0.72);  /* frosted nav/panels */
  --c-bg-soft:   #f4e5f0;   /* soft tinted gradient end */
  --c-overlay:   rgba(20, 5, 25, 0.45);      /* modal scrim */

  /* RGB triplets for the bg surfaces — used for translucent variants */
  --rgb-bg-elev: 255 255 255;

  /* ---------- Text (theme-aware) ---------- */
  --c-ink:       #0f0a14;
  --c-ink-soft:  #2b1f33;
  --c-muted:     #5a4d63;

  /* RGB triplet of ink — used for translucent text/borders/shadows */
  --rgb-ink:     15 10 20;

  /* ---------- On-brand text (always white) ---------- */
  --c-on-brand:    #ffffff;     /* text on .nav__cta, .btn-primary, etc. */
  --c-on-feature:  #ffffff;     /* text inside always-dark feature blocks */

  /* ---------- Always-dark feature blocks ----------
     Contact section, testimonial quote area, footer — by design,
     these are dark accent blocks REGARDLESS of theme. Same value
     in light and dark mode. Their text uses --c-on-feature. */
  --c-bg-feature:        #0a0614;
  --c-bg-feature-elev:   #1a0e26;  /* cards inside a feature block */
  --rgb-feature-ink:     255 255 255;  /* for translucent text on feature bg */

  /* ---------- Borders ---------- */
  --c-border:        #e7dfec;

  /* ---------- Logo filter ----------
     Light mode → render logos dark (so white/grey artwork is visible).
     Dark mode  → render logos white. */
  --logo-filter: brightness(0) invert(0);
}

[data-theme="dark"] {
  --c-bg:        #0f0a14;
  --c-bg-elev:   #1a1320;
  --c-bg-glass:  rgba(26, 19, 32, 0.72);
  --c-bg-soft:   #2a1d34;
  --c-overlay:   rgba(0, 0, 0, 0.6);

  --rgb-bg-elev: 26 19 32;

  --c-ink:       #faf7fb;
  --c-ink-soft:  #e7dfec;
  --c-muted:     #b8a8c4;

  --rgb-ink:     250 247 251;

  --c-border:    #2b1f33;

  --logo-filter: brightness(0) invert(1);
}