/* ============================================================
   VIXA · COLOR TOKENS
   Dark-first brand. Vivid electric blue on near-black, with a
   cyan→sky gradient accent and deep purple-navy "wave" depths.
   ============================================================ */

:root {
  /* ---- Brand · Vivid Blue (the logo blue) ---- */
  --blue-50:  #E6F0FF;
  --blue-100: #C2DBFF;
  --blue-200: #8FB8FF;
  --blue-300: #4F92FF;
  --blue-400: #1A75FF;   /* hover / brighter */
  --blue-500: #0161FD;   /* PRIMARY — sampled from logo */
  --blue-600: #0050D6;
  --blue-700: #0042B0;   /* press / darker */
  --blue-800: #00337F;
  --blue-900: #002259;

  /* ---- Accent · Cyan → Sky (headline gradient) ---- */
  --cyan-400: #6FD6E8;
  --cyan-500: #4FC8DD;   /* teal headline start — sampled */
  --sky-400:  #9BC7F0;
  --sky-500:  #7FB4E8;   /* light-blue headline / muted accent */

  /* ---- Ink · near-black surfaces (verified from vixaassist.com) ---- */
  --ink-950: #000000;    /* pure black (hero deepest) */
  --ink-900: #0A0A0A;    /* page background — rgb(10,10,10) */
  --ink-850: #0F0F0F;    /* card fill — rgb(15,15,15) */
  --ink-800: #121212;    /* raised card */
  --ink-750: #1E1E1E;    /* highlighted/raised surface — rgb(30,30,30) */
  --ink-700: #2A2A2A;    /* hairline / border on dark */
  --ink-600: #383838;

  /* ---- Navy & Purple depths (gradient waves) ---- */
  --navy-900: #03112C;   /* deep navy — sampled */
  --navy-800: #0A1A3A;
  --navy-700: #122a55;
  --purple-900: #14123A;
  --purple-800: #1C1941;  /* purple wave — sampled */
  --purple-700: #2A2560;

  /* ---- Neutral greys (verified from vixaassist.com) ---- */
  --white:     #FFFFFF;
  --grey-100:  #F2F2F2;   /* primary light text — rgb(242,242,242) */
  --grey-200:  #BFBFBF;   /* secondary text — rgb(191,191,191) */
  --grey-300:  #999999;   /* muted body */
  --grey-400:  #7A7B8B;   /* brand muted (nav, labels) — rgb(122,123,139) */
  --grey-500:  #555555;
  --grey-600:  #383838;

  /* Translucent greys (nav pill / hairlines) */
  --grey-glass:   rgba(122,123,139,0.15);  /* nav pill fill */
  --grey-line:    rgba(122,123,139,0.20);  /* divider */
  --grey-border:  rgba(122,123,139,0.10);  /* hairline border */

  /* ---- Semantic status ---- */
  --success-500: #34C77B;
  --success-bg:  #0E2A1E;
  --warning-500: #F5B23D;
  --warning-bg:  #2C2310;
  --danger-500:  #F5564A;
  --danger-bg:   #2C1413;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */

  /* Brand */
  --brand:            var(--blue-500);
  --brand-hover:      var(--blue-400);
  --brand-press:      var(--blue-700);
  --brand-subtle:     color-mix(in srgb, var(--blue-500) 14%, transparent);
  --accent-cyan:      var(--cyan-500);
  --accent-sky:       var(--sky-500);

  /* Headline gradient — SOCIAL/POSTER MODE only (cyan → sky → blue).
     The website does NOT use this; it uses a solid blue accent word. */
  --gradient-headline: linear-gradient(100deg, var(--cyan-500) 0%, var(--sky-500) 45%, var(--blue-400) 100%);
  --gradient-brand:    linear-gradient(135deg, var(--blue-400) 0%, var(--blue-600) 100%);
  /* Page "wave" depth — SOCIAL/POSTER MODE bottom edge */
  --gradient-wave:     linear-gradient(180deg, var(--ink-900) 0%, var(--navy-900) 60%, var(--purple-800) 100%);
  --gradient-glow:     radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, var(--blue-500) 22%, transparent), transparent 70%);

  /* Surfaces (dark — website) */
  --surface-page:     var(--ink-900);   /* #0A0A0A */
  --surface-card:     var(--ink-850);   /* #0F0F0F flat card */
  --surface-raised:   var(--ink-750);   /* #1E1E1E */
  --surface-sunken:   var(--ink-950);   /* #000 */
  --surface-glass:    var(--grey-glass); /* translucent nav pill */

  /* Text (on dark — verified) */
  --text-strong:      var(--grey-100);  /* #F2F2F2 primary headings/text */
  --text-body:        var(--grey-200);  /* #BFBFBF */
  --text-muted:       var(--grey-400);  /* #7A7B8B brand muted */
  --text-subtle:      var(--grey-400);
  --text-on-brand:    var(--white);
  --text-link:        var(--brand);

  /* Borders & lines (verified) */
  --border-hairline:  var(--grey-border);  /* rgba(122,123,139,.10) */
  --border-strong:    var(--grey-line);    /* rgba(122,123,139,.20) */
  --border-brand:     var(--blue-500);     /* active pill / featured card */
  --border-glow:      color-mix(in srgb, var(--blue-500) 55%, transparent);

  /* Focus */
  --focus-ring:       color-mix(in srgb, var(--blue-400) 70%, transparent);
}