/* ============================================================
   AutoFlowAI — THEME (soft light, refined, lively)
   Loaded LAST so it overrides the kit's defaults.
   Direction: soft LIGHT (grey-lavender, not stark white) ·
   one violet accent · smooth, plentiful motion · white cards for depth.
   (Dialed here; fold into colors.css once locked.)
   ============================================================ */
:root {
  /* Surfaces — soft light, not stark white (avoids "plain"), with depth */
  --bg-page:        #E6E9F2;
  --bg-page-soft:   #DDE2EE;
  --surface-1:      #FFFFFF;   /* white cards pop on the soft-grey page */
  --surface-2:      #F1F3FA;
  --surface-3:      #E9ECF5;

  /* Text — deep navy on light */
  --text-strong:    #161C30;
  --text-body:      #434C6B;
  --text-muted:     #6B7595;
  --text-faint:     #98A1BD;
  --text-on-ink:    #EEF1F8;

  /* Brand — one refined violet accent (restrained) */
  --brand:          #6E56F7;
  --brand-hover:    #5A40E6;
  --brand-press:    #4A33C2;
  --brand-soft:     color-mix(in oklab, #6E56F7 12%, transparent);
  --accent:         #6E56F7;
  --accent-hover:   #5A40E6;
  --accent-soft:    color-mix(in oklab, #6E56F7 10%, transparent);
  --pop:            #6E56F7;
  --pop-hover:      #5A40E6;
  --pop-soft:       color-mix(in oklab, #6E56F7 10%, transparent);

  /* Borders — navy-alpha hairlines (for light bg) */
  --border-subtle:  color-mix(in oklab, #161C30 7%, transparent);
  --border-default: color-mix(in oklab, #161C30 11%, transparent);
  --border-strong:  color-mix(in oklab, #161C30 16%, transparent);
  --border-brand:   color-mix(in oklab, #6E56F7 42%, transparent);

  /* Gradients — restrained, mono-violet */
  --grad-brand:    linear-gradient(108deg, #7C6BF0 0%, #6E56F7 100%);
  --grad-spectrum: linear-gradient(108deg, #8E76F8 0%, #6E56F7 100%);
  --grad-ink:      linear-gradient(165deg, #20283E 0%, #141A2C 100%);  /* dark CTA panel = premium contrast on light */

  /* Hero/section wash — soft violet glow */
  --wash-hero: radial-gradient(55% 55% at 14% 8%, color-mix(in oklab, #6E56F7 18%, transparent) 0%, transparent 60%),
               radial-gradient(50% 50% at 88% 14%, color-mix(in oklab, #8E76F8 16%, transparent) 0%, transparent 60%);

  /* Glass + glows + shadows for light */
  --glass-bg: color-mix(in oklab, #E6E9F2 72%, transparent);
  --glow-violet: 0 8px 28px color-mix(in oklab, #6E56F7 30%, transparent);
  --shadow-xs: 0 1px 2px rgba(22,28,48,0.06);
  --shadow-sm: 0 2px 10px rgba(22,28,48,0.08), 0 1px 2px rgba(22,28,48,0.05);
  --shadow-md: 0 10px 30px rgba(22,28,48,0.10);
  --shadow-lg: 0 20px 48px rgba(22,28,48,0.12);
  --shadow-xl: 0 32px 70px rgba(22,28,48,0.15);
  --shadow-brand-lift: 0 18px 44px color-mix(in oklab, #6E56F7 20%, transparent);
}

/* Frosted nav on light */
.afw-nav__bar{ background: var(--glass-bg); border-bottom: 1px solid var(--border-subtle); }
.afw-nav.scrolled .afw-nav__bar{ background: color-mix(in oklab, #E6E9F2 88%, transparent); }

/* Flow-canvas node tiles: soft violet (override the kit's varied pastel inline tints) */
.afw-node__ic{ background: var(--brand-soft) !important; color: var(--brand) !important; }
.afw-node--ai .afw-node__ic{ background: color-mix(in oklab, #6E56F7 18%, transparent) !important; }

::selection{ background: color-mix(in oklab, #6E56F7 22%, transparent); color: #161C30; }

/* Contact panel — LIGHT (no black anywhere), soft branded */
.afw-cta{ background: linear-gradient(140deg, #F3F1FF 0%, #E7EAF7 100%); border: 1px solid var(--border-default); }
.afw-cta h2{ color: var(--text-strong); }
.afw-cta p{ color: var(--text-body); }
.afw-cta .afw-eyebrow{ color: var(--brand); }
.afw-cta__wash{ opacity: .45; }

/* let the moving background show through behind content */
html{ background: var(--bg-page); }
body, .afw{ background: transparent !important; }

/* Wordmark rendered as real text (AutoFlow + AI always together, in the page font) */
.af-brand{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; line-height:1; }
.af-brand__mark{ flex:none; display:block; }
.af-brand__name{ font-family:var(--font-display); font-weight:800; font-size:1.35rem; letter-spacing:-0.02em; color:var(--text-strong); white-space:nowrap; }
.af-brand__ai{ font-family:var(--font-mono); font-weight:600; font-size:.9em; color:#14BEDC; margin-left:1px; }