/* ==========================================================================
   CWG · Color System
   Dark-first. Near-black "void" canvas + luminous "world" gradients.
   The four worlds (Ganzfeld, Daybreak, Aurora, Skyspace) are the brand's
   signature spectra, sampled directly from the official world artwork.
   ========================================================================== */
:root {
  /* ---- Void neutrals (the dark canvas) ---------------------------------- */
  --void-900: #08070A;   /* deepest background */
  --void-800: #0C0B10;   /* app background */
  --void-700: #131118;   /* raised surface */
  --void-600: #1A1822;   /* card surface */
  --void-500: #24222E;   /* elevated / hover surface */
  --void-400: #322F3D;   /* strong border / input */
  --void-300: #47434F;   /* muted lines */

  /* ---- Light neutrals (for on-light usage & light mode) ----------------- */
  --paper-000: #FFFFFF;
  --paper-050: #F7F6FA;
  --paper-100: #EFEDF3;
  --paper-200: #E1DEE8;
  --paper-300: #CBC7D4;

  /* ---- Ink (text) scale ------------------------------------------------- */
  --ink-000: #FFFFFF;    /* primary on dark */
  --ink-100: #EEECF3;
  --ink-300: #B7B3C4;    /* secondary on dark */
  --ink-500: #837E93;    /* muted / captions */
  --ink-700: #56525F;    /* disabled on dark */
  --ink-900: #0C0B10;    /* primary on light */

  /* ---- Core brand accents (solids, sampled from world spectra) ---------- */
  --wonder-pink:   #EC3B87;  /* signature CWG magenta-pink */
  --wonder-violet: #9A2BE2;  /* deep discovery violet */
  --wonder-coral:  #F9785F;  /* daybreak coral */
  --wonder-amber:  #FFB585;  /* dawn peach/amber */
  --wonder-teal:   #21C1C5;  /* aurora teal */
  --wonder-green:  #2FD59B;  /* aurora green */
  --wonder-sky:    #2C91DB;  /* skyspace blue */
  --wonder-cyan:   #46C6DF;  /* skyspace cyan */

  /* ---- Semantic aliases ------------------------------------------------- */
  --accent:            var(--wonder-pink);
  --accent-strong:     #D8256F;
  --accent-soft:       rgba(236, 59, 135, 0.14);
  --accent-contrast:   #FFFFFF;

  --success: #2FD59B;
  --success-soft: rgba(47, 213, 155, 0.14);
  --info:    #46C6DF;
  --info-soft: rgba(70, 198, 223, 0.14);
  --warning: #FFB454;
  --warning-soft: rgba(255, 180, 84, 0.16);
  --danger:  #FF5D6B;
  --danger-soft: rgba(255, 93, 107, 0.15);

  /* ---- Surfaces & text semantics (dark, the default) -------------------- */
  --bg-app:        var(--void-800);
  --bg-deep:       var(--void-900);
  --surface-1:     var(--void-700);
  --surface-2:     var(--void-600);
  --surface-3:     var(--void-500);
  --surface-hover: rgba(255,255,255,0.04);

  --text-primary:   var(--ink-000);
  --text-secondary: var(--ink-300);
  --text-muted:     var(--ink-500);
  --text-disabled:  var(--ink-700);
  --text-onaccent:  #FFFFFF;

  --border-subtle: rgba(255,255,255,0.08);
  --border-default: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.22);
  --border-focus:  var(--wonder-pink);

  /* ---- The four WORLD gradients (signature) ----------------------------- */
  /* Ganzfeld — the hero: amber → pink → violet */
  --world-ganzfeld: linear-gradient(150deg, #FFE9A8 0%, #F9785F 26%, #F64A95 55%, #9A2BE2 100%); /* @kind color */
  /* Daybreak — sunrise: peach → coral → rose → plum */
  --world-daybreak: linear-gradient(160deg, #FFDFA6 0%, #F9785F 34%, #D65577 66%, #7A3B8F 100%); /* @kind color */
  /* Aurora — cool bloom: mint → green → teal */
  --world-aurora:   linear-gradient(155deg, #E8FFD5 0%, #3DEFA8 38%, #21C1C5 72%, #285982 100%); /* @kind color */
  /* Skyspace — deep sky: cyan → sky → deep blue */
  --world-skyspace: linear-gradient(160deg, #CFFBEA 0%, #46C6DF 34%, #2C91DB 68%, #1E4F9D 100%); /* @kind color */

  --gradient-brand: var(--world-ganzfeld); /* @kind color */

  /* Subtle radial "wonder glow" for backdrops */
  --glow-pink:   radial-gradient(60% 60% at 50% 0%, rgba(236,59,135,0.28), rgba(236,59,135,0) 70%); /* @kind color */
  --glow-violet: radial-gradient(50% 50% at 80% 20%, rgba(154,43,226,0.25), rgba(154,43,226,0) 70%); /* @kind color */
}
