/* ============================================================
   AI 2030 — Color tokens
   Source: AI2030 Brand Book v3 (06.2024), "COLORS" page.
   Hex values transcribed from the brand book swatches.
   ============================================================ */
:root {
  /* --- Primary brand colors (screen) --- */
  --ai-cyan:      #33C5FF;  /* electric sky */
  --ai-indigo:    #6174FF;  /* periwinkle */
  --ai-purple:    #912BFF;  /* core violet */
  --ai-magenta:   #FF41EF;  /* hot pink */

  /* --- Secondary colors --- */
  --ai-sky:       #43BFEA;  /* softer cyan */
  --ai-teal:      #028DBB;  /* deep teal-blue */
  --ai-rose:      #D62E92;  /* magenta-rose */
  --ai-violet:    #6C2E8D;  /* aubergine */

  /* --- Deep + neutral (print palette) --- */
  --ai-navy:      #001F3F;  /* primary dark / brand ground */
  --ai-steel:     #5D82A3;  /* muted blue-gray */
  --ai-mist:      #BFD3D8;  /* pale blue-gray */
  --ai-ice:       #CDEDF7;  /* pale cyan */
  --ai-lavender:  #C1ABED;  /* pale lavender */
  --ai-blush:     #EDDDE6;  /* pale pink */

  /* --- Navy elevation scale (derived for dark UI surfaces) --- */
  --ai-navy-900:  #001222;
  --ai-navy-800:  #001F3F;  /* = --ai-navy */
  --ai-navy-700:  #072B52;
  --ai-navy-600:  #0F3865;
  --ai-navy-500:  #1B4A7D;

  /* --- Absolute + light neutrals --- */
  --ai-white:     #FFFFFF;
  --ai-paper:     #F5F9FC;  /* off-white page tint */
  --ai-cloud:     #E7EEF4;  /* light border / divider */
  --ai-black:     #05070A;

  /* --- Gradients (the "ai" mark reads blue → purple → magenta) --- */
  --grad-brand:   linear-gradient(120deg, var(--ai-cyan) 0%, var(--ai-indigo) 32%, var(--ai-purple) 66%, var(--ai-magenta) 100%);
  --grad-mark:    linear-gradient(40deg, var(--ai-cyan) 0%, var(--ai-indigo) 35%, var(--ai-purple) 70%, var(--ai-magenta) 100%);
  --grad-violet:  linear-gradient(120deg, var(--ai-purple) 0%, var(--ai-magenta) 100%);
  --grad-cool:    linear-gradient(120deg, var(--ai-cyan) 0%, var(--ai-indigo) 100%);
  --grad-veil:    linear-gradient(180deg, rgba(0,31,63,0) 0%, rgba(0,31,63,0.85) 100%); /* @kind color */

  /* ============================================================
     Semantic aliases — reference these in components.
     Defaults below target LIGHT surfaces.
     ============================================================ */
  --surface-page:      var(--ai-white);
  --surface-sunken:    var(--ai-paper);
  --surface-card:      var(--ai-white);
  --surface-raised:    var(--ai-white);
  --surface-inverse:   var(--ai-navy);

  --text-strong:       var(--ai-navy);
  --text-body:         #123456;         /* softened navy for long copy */
  --text-muted:        var(--ai-steel);
  --text-on-accent:    var(--ai-white);
  --text-on-dark:      var(--ai-white);
  --text-link:         var(--ai-purple);
  --text-link-hover:   var(--ai-rose);

  --border-subtle:     var(--ai-cloud);
  --border-strong:     var(--ai-mist);
  --border-focus:      var(--ai-purple);

  --accent:            var(--ai-purple);
  --accent-hover:      #7d1fe6;         /* darker purple */
  --accent-2:          var(--ai-cyan);
  --accent-contrast:   var(--ai-magenta);

  --focus-ring:        0 0 0 3px rgba(145, 43, 255, 0.35);

  /* Status — tuned to sit within the brand family */
  --status-success:    #12B76A;
  --status-warning:    #F59E0B;
  --status-danger:     #E5484D;
  --status-info:       var(--ai-cyan);
}

/* ------------------------------------------------------------
   Dark scope — brand is dark-forward. Apply .ai-dark (or
   [data-theme="dark"]) on any container to flip semantics.
   ------------------------------------------------------------ */
.ai-dark, [data-theme="dark"] {
  --surface-page:    var(--ai-navy-800);
  --surface-sunken:  var(--ai-navy-900);
  --surface-card:    var(--ai-navy-700);
  --surface-raised:  var(--ai-navy-600);
  --surface-inverse: var(--ai-white);

  --text-strong:     var(--ai-white);
  --text-body:       #D6E4F0;
  --text-muted:      #7FA0BF;
  --text-link:       var(--ai-cyan);
  --text-link-hover: var(--ai-magenta);

  --border-subtle:   rgba(255,255,255,0.10);
  --border-strong:   rgba(255,255,255,0.20);

  --accent:          var(--ai-cyan);
  --accent-hover:    #5BD1FF;
  --text-on-accent:  var(--ai-navy);
}