/* AI Lab — Colour system
   Deep purple is the dominant brand colour; teal is the energy/innovation accent.
   The brand is dark-first: surfaces are built up from deep purple, not white. */

:root {
  /* ── Brand palette (from brand guidelines) ───────────────────────── */
  --brand-purple:       #5B21B6;   /* dominant brand colour */
  --highlight-purple:   #9562EB;   /* bright purple — interactive / on-dark */
  --teal:               #00D4B4;   /* energy & innovation accent */
  --white:              #FFFFFF;

  /* Backgrounds & surfaces (deep purple scale) */
  --bg-dark:            #0E0B1F;   /* page base */
  --bg-mid:            #120F28;   /* elevated background band */
  --surface-dark:       #1A1535;   /* cards / panels */

  /* Neutral */
  --neutral-grey:       #8B8B9E;

  /* ── Derived tints (oklch-harmonious extensions of the palette) ──── */
  --surface-raised:     #221C42;   /* card hover / raised panel */
  --purple-deep:        #3A1576;   /* between bg and brand — pressed states */
  --highlight-soft:     #B79AF2;   /* faint purple for de-emphasised text */
  --teal-dim:           #0FA28C;   /* darker teal for on-light / borders */

  /* Text greys */
  --grey-100:           #E9E8F0;
  --grey-300:           #C4C2D4;   /* secondary text on dark */
  --grey-500:           #8B8B9E;   /* muted text (= neutral-grey) */
  --grey-700:           #565270;

  /* ── Semantic aliases (dark-first) ───────────────────────────────── */
  --color-bg:                var(--bg-dark);
  --color-bg-elevated:       var(--bg-mid);
  --surface-card:            var(--surface-dark);
  --surface-card-hover:      var(--surface-raised);

  --text-primary:            var(--white);
  --text-secondary:          var(--grey-300);
  --text-muted:              var(--grey-500);
  --text-on-brand:           var(--white);
  --text-link:               var(--highlight-purple);

  --border-subtle:           rgba(255, 255, 255, 0.08);
  --border-strong:           rgba(255, 255, 255, 0.16);
  --border-brand:            rgba(149, 98, 235, 0.45);

  --accent:                  var(--brand-purple);
  --accent-bright:           var(--highlight-purple);
  --accent-teal:             var(--teal);

  /* Status (kept within the brand family + teal) */
  --color-success:           var(--teal);
  --color-info:              var(--highlight-purple);
  --color-warning:           #F2B84B;
  --color-danger:            #F2587B;

  /* ── Gradients ───────────────────────────────────────────────────── */
  --gradient-brand:          linear-gradient(135deg, var(--highlight-purple) 0%, var(--brand-purple) 100%);
  --gradient-brand-teal:     linear-gradient(120deg, var(--highlight-purple) 0%, var(--teal) 130%);
  --gradient-surface:        linear-gradient(180deg, var(--surface-raised) 0%, var(--surface-dark) 100%);
}