/* ============================================================
   COLORS  —  Morflax Design System
   Neutral-first UI · violet/indigo accent ·
   signature iridescent pink → violet → cobalt brand gradient.
   Base ramps are theme-agnostic; semantic aliases flip per theme.
   ============================================================ */

:root {
  /* ---- Neutral ramp (cool grey) ---------------------------- */
  --n-0:   #ffffff;
  --n-25:  #fbfbfc;
  --n-50:  #f6f6f7;
  --n-75:  #f1f1f3;
  --n-100: #ececee;
  --n-150: #e4e4e7;
  --n-200: #d8d8dc;
  --n-300: #bfbfc6;
  --n-400: #9b9ba4;
  --n-500: #71717a;
  --n-600: #56565f;
  --n-700: #3f3f46;
  --n-800: #27272b;
  --n-850: #1c1c20;
  --n-900: #161619;
  --n-950: #0e0e10;
  --n-975: #09090b;

  /* ---- Brand violet / indigo accent ------------------------ */
  --violet-50:  #f1eefe;
  --violet-100: #e3ddfd;
  --violet-200: #c9bdfb;
  --violet-300: #b0a0f9;
  --violet-400: #9182f5;
  --violet-500: #6d5cf0;   /* primary accent */
  --violet-600: #5a47e0;
  --violet-700: #4a39c2;
  --violet-800: #3a2d99;

  /* ---- Signature iridescent stops -------------------------- */
  --iris-pink:    #ff63b0;
  --iris-magenta: #f0489c;
  --iris-violet:  #9a6cff;
  --iris-blue:    #3b49e8;
  --iris-cobalt:  #2e2fe0;
  --coral:        #ff6f61;
  --coral-soft:   #ff8a73;

  /* ---- Semantic status hues -------------------------------- */
  --green-500: #18a86b;
  --green-400: #25c98a;
  --amber-500: #f5a623;
  --amber-400: #f7b94e;
  --red-500:   #e5484d;
  --red-400:   #f0656a;
  --blue-500:  #3b82f6;

  /* ---- Brand gradients ------------------------------------- */
  --gradient-iris:   linear-gradient(135deg, #ff63b0 0%, #9a6cff 50%, #3b49e8 100%); /* @kind color */
  --gradient-iris-soft: linear-gradient(135deg, #ffa4d2 0%, #c4acff 50%, #8e97f2 100%); /* @kind color */
  --gradient-coral:  linear-gradient(160deg, #ff8a73 0%, #f0489c 100%); /* @kind color */
  --gradient-violet: linear-gradient(140deg, #9182f5 0%, #5a47e0 100%); /* @kind color */
  --gradient-cobalt: linear-gradient(150deg, #6d5cf0 0%, #2e2fe0 100%); /* @kind color */
  --gradient-sheen:  linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%); /* @kind color */

  /* ========================================================
     LIGHT THEME (default)  —  Morflax Studio canvas
     ======================================================== */
  --bg-base:      var(--n-50);
  --bg-canvas:    var(--n-75);
  --bg-sunken:    var(--n-100);

  --surface-1:    #ffffff;          /* floating panels, cards */
  --surface-2:    var(--n-50);      /* secondary surface      */
  --surface-3:    var(--n-100);     /* hover fill             */
  --surface-inset:var(--n-75);      /* inputs, wells          */
  --surface-inverse: var(--n-900);

  --border-subtle:  var(--n-100);
  --border-default: var(--n-150);
  --border-strong:  var(--n-200);

  --text-primary:   var(--n-900);
  --text-secondary: var(--n-500);
  --text-tertiary:  var(--n-400);
  --text-disabled:  var(--n-300);
  --text-inverse:   var(--n-25);
  --text-on-accent: #ffffff;

  --accent:        var(--violet-500);
  --accent-hover:  var(--violet-600);
  --accent-press:  var(--violet-700);
  --accent-soft:   rgba(109, 92, 240, 0.10);
  --accent-text:   var(--violet-600);
  --focus-ring:    rgba(109, 92, 240, 0.40);

  --success: var(--green-500);
  --success-soft: rgba(24, 168, 107, 0.12);
  --warning: var(--amber-500);
  --warning-soft: rgba(245, 166, 35, 0.14);
  --danger:  var(--red-500);
  --danger-soft: rgba(229, 72, 77, 0.12);
  --info:    var(--blue-500);
  --info-soft: rgba(59, 130, 246, 0.12);

  --overlay-scrim: rgba(16, 16, 20, 0.45);
  --glass-fill:    rgba(255, 255, 255, 0.72);
  --glass-border:  rgba(255, 255, 255, 0.55);
  --canvas-grid:   rgba(16, 16, 20, 0.045);

  color-scheme: light;
}

/* ========================================================
   DARK THEME  —  Morflax Studio dark editor
   ======================================================== */
[data-theme="dark"] {
  --bg-base:      var(--n-950);
  --bg-canvas:    var(--n-975);
  --bg-sunken:    #060608;

  --surface-1:    var(--n-850);     /* floating panels        */
  --surface-2:    var(--n-900);
  --surface-3:    var(--n-800);
  --surface-inset:#131316;
  --surface-inverse: var(--n-50);

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.16);

  --text-primary:   var(--n-50);
  --text-secondary: var(--n-400);
  --text-tertiary:  var(--n-500);
  --text-disabled:  var(--n-600);
  --text-inverse:   var(--n-900);
  --text-on-accent: #ffffff;

  --accent:        var(--violet-400);
  --accent-hover:  var(--violet-300);
  --accent-press:  var(--violet-500);
  --accent-soft:   rgba(145, 130, 245, 0.16);
  --accent-text:   var(--violet-300);
  --focus-ring:    rgba(145, 130, 245, 0.50);

  --success-soft: rgba(37, 201, 138, 0.16);
  --warning-soft: rgba(247, 185, 78, 0.16);
  --danger-soft:  rgba(240, 101, 106, 0.16);
  --info-soft:    rgba(59, 130, 246, 0.18);

  --overlay-scrim: rgba(0, 0, 0, 0.62);
  --glass-fill:    rgba(28, 28, 32, 0.66);
  --glass-border:  rgba(255, 255, 255, 0.10);
  --canvas-grid:   rgba(255, 255, 255, 0.05);

  color-scheme: dark;
}