/* ============================================================
   Alias — Color tokens
   Ink-neutral canvas + one bright mint accent, plus an
   inverted "action" pair for the primary CTA. Dark is the
   default theme (:root); [data-theme="light"] flips it.
   ============================================================ */

:root {
  /* ---- Accent: Alias mint (#1FE0BE) ---- */
  --mint-50:  #e9fcf7;
  --mint-100: #c8f7ec;
  --mint-200: #93efdc;
  --mint-300: #55e7cb;
  --mint-400: #1FE0BE; /* brand base */
  --mint-500: #12c4a4;
  --mint-600: #0AA88C; /* light-theme accent */
  --mint-700: #0b8571;
  --mint-800: #0e685a;
  --mint-900: #0e453d;

  /* ---- Neutrals: ink scale (warm-leaning near-black) ---- */
  --neutral-0:    #ffffff;
  --neutral-25:   #FCFCFB;
  --neutral-50:   #FAFAF9;
  --neutral-100:  #F3F3F1;
  --neutral-200:  #E4E4E1;
  --neutral-300:  #C9C9C5;
  --neutral-400:  #A6A6AB;
  --neutral-500:  #8A8A8E;
  --neutral-600:  #6E6E73;
  --neutral-700:  #5E5E63;
  --neutral-800:  #2A2A2E;
  --neutral-850:  #18181C;
  --neutral-900:  #141417;
  --neutral-925:  #131316;
  --neutral-950:  #0D0D0F;
  --neutral-1000: #0A0A0B;

  /* ---- Mesh: the gradient-accent palette (grainy hero tiles) ----
     Used only as blurred blobs behind a dark tile, never as flat fills. */
  --mesh-1: #1FE0BE; /* mint — always present, always the largest */
  --mesh-2: #2BD4C4; /* aqua */
  --mesh-3: #4FA9F5; /* azure */
  --mesh-4: #86E27A; /* leaf */
  --mesh-5: #F3C892; /* sand — warm counterweight, use smallest */

  /* ---- Raw semantic hues ---- */
  --green-400: #40c98a;
  --green-500: #21a56b;
  --amber-400: #f2b23e;
  --amber-500: #d5901c;
  --red-400:   #f2685f;
  --red-500:   #dd4a41;
  --blue-400:  #5aa2f5;
  --blue-500:  #3a82e0;
}

/* ============================================================
   Semantic layer — DARK (default)
   ============================================================ */
:root {
  --bg-base:       var(--neutral-1000);
  --bg-subtle:     var(--neutral-950);
  --bg-elevated:   var(--neutral-900);
  --surface-card:  var(--neutral-900);
  --surface-input: var(--neutral-925);
  --surface-overlay: var(--neutral-800);
  --surface-hover: rgba(255,255,255,0.06);
  --surface-active: rgba(255,255,255,0.10);

  --border-subtle:  rgba(255,255,255,0.08);
  --border-default: rgba(255,255,255,0.14);
  --border-strong:  rgba(255,255,255,0.22);

  --text-primary:   #F7F7F5;
  --text-secondary: var(--neutral-400);
  --text-tertiary:  var(--neutral-500);
  --text-disabled:  var(--neutral-700);
  --text-on-accent: var(--neutral-1000);

  --accent:        var(--mint-400);
  --accent-hover:  var(--mint-300);
  --accent-active: var(--mint-500);
  --accent-strong: var(--mint-500);
  --accent-text:   var(--mint-300);
  --accent-subtle: rgba(31,224,190,0.12);
  --accent-border: rgba(31,224,190,0.32);
  --accent-ring:   rgba(31,224,190,0.45);

  /* ---- Action: the inverted primary CTA (marketing + nav) ---- */
  --action-bg:     var(--neutral-50);
  --action-text:   var(--neutral-1000);
  --action-hover:  var(--neutral-200);

  /* ---- Chrome ---- */
  --nav-bg:    rgba(10,10,11,0.82);
  --dot-grid:  rgba(255,255,255,0.09);
  --mesh-base:     #0c1512;
  --mesh-vignette: rgba(8,16,14,0.30);
  --mesh-blur:     46px;
  --grain-blend: overlay;
  --grain-opacity: 0.34;

  --success:        var(--green-400);
  --success-subtle: rgba(64,201,138,0.14);
  --warning:        var(--amber-400);
  --warning-subtle: rgba(242,178,62,0.14);
  --danger:         var(--red-400);
  --danger-subtle:  rgba(242,104,95,0.14);
  --info:           var(--blue-400);
  --info-subtle:    rgba(90,162,245,0.14);

  color-scheme: dark;
}

/* ============================================================
   Semantic layer — LIGHT (warm off-white, not pure white)
   ============================================================ */
[data-theme="light"] {
  --bg-base:       var(--neutral-25);
  --bg-subtle:     var(--neutral-100);
  --bg-elevated:   var(--neutral-0);
  --surface-card:  var(--neutral-0);
  --surface-input: var(--neutral-0);
  --surface-overlay: var(--neutral-0);
  --surface-hover: rgba(11,11,12,0.05);
  --surface-active: rgba(11,11,12,0.08);

  --border-subtle:  rgba(11,11,12,0.10);
  --border-default: rgba(11,11,12,0.16);
  --border-strong:  rgba(11,11,12,0.26);

  --text-primary:   var(--neutral-850);
  --text-secondary: #55555B;
  --text-tertiary:  var(--neutral-600);
  --text-disabled:  var(--neutral-400);
  --text-on-accent: var(--neutral-0);

  --accent:        var(--mint-600);
  --accent-hover:  var(--mint-500);
  --accent-active: var(--mint-700);
  --accent-strong: var(--mint-700);
  --accent-text:   var(--mint-700);
  --accent-subtle: rgba(10,168,140,0.14);
  --accent-border: rgba(10,168,140,0.38);
  --accent-ring:   rgba(10,168,140,0.40);

  --action-bg:     var(--neutral-850);
  --action-text:   var(--neutral-50);
  --action-hover:  #000000;

  --nav-bg:    rgba(252,252,251,0.82);
  --dot-grid:  rgba(11,11,12,0.055);
  /* Mesh tiles stay dark in both themes — they are a dark-tile motif. */
  --mesh-base:     #0c1512;
  --mesh-vignette: rgba(8,16,14,0.30);
  --mesh-blur:     46px;
  --grain-blend: multiply;
  --grain-opacity: 0.16;

  --success:        var(--green-500);
  --success-subtle: rgba(33,165,107,0.12);
  --warning:        var(--amber-500);
  --warning-subtle: rgba(213,144,28,0.14);
  --danger:         var(--red-500);
  --danger-subtle:  rgba(221,74,65,0.12);
  --info:           var(--blue-500);
  --info-subtle:    rgba(58,130,224,0.12);

  color-scheme: light;
}