/* ===========================================================================
   Klozera — Color tokens
   ---------------------------------------------------------------------------
   "Cool, structured, trustworthy." A confident blue ("Klozera" = the closer)
   over cool slate neutrals. Base ramps first, then semantic aliases.
   Semantic aliases are what product code should consume.
   =========================================================================== */
:root {
  /* --- Brand blue ramp -------------------------------------------------- */
  --blue-50:  #EFF5FF;
  --blue-100: #DBE8FE;
  --blue-200: #BFD7FE;
  --blue-300: #93BBFD;
  --blue-400: #609BFA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB; /* primary brand */
  --blue-700: #1D4FD7;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;
  --blue-950: #172554;

  /* --- Cool slate neutral ramp ----------------------------------------- */
  --slate-0:   #FFFFFF;
  --slate-25:  #FAFBFD;
  --slate-50:  #F5F7FA;
  --slate-100: #EEF1F6;
  --slate-150: #E5E9F1;
  --slate-200: #DCE2EC;
  --slate-300: #C4CCDB;
  --slate-400: #9BA6BC;
  --slate-500: #6B7793;
  --slate-600: #4D5872;
  --slate-700: #3A4458;
  --slate-800: #28303F;
  --slate-900: #1A2030;
  --slate-950: #0F131C;

  /* --- Supporting accent (teal) — used sparingly for "connected/live" --- */
  --teal-100: #CCFBF1;
  --teal-300: #5EEAD4;
  --teal-500: #14B8A6;
  --teal-600: #0D9488;
  --teal-700: #0F766E;

  /* --- Semantic status ramps ------------------------------------------- */
  --green-100: #DCFCE7;
  --green-500: #22C55E;
  --green-600: #16A34A;
  --green-700: #15803D;

  --amber-100: #FEF3C7;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-700: #B45309;

  --red-100: #FEE2E2;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-700: #B91C1C;

  /* --- Channel colors (social + call tracking) ------------------------- */
  --channel-whatsapp:  #25D366;
  --channel-instagram: #E1306C;
  --channel-messenger: #0084FF;
  --channel-email:     #6B7793;
  --channel-call:      #2563EB;
  --channel-sms:       #14B8A6;

  /* ====================================================================
     SEMANTIC ALIASES — LIGHT (default)
     ==================================================================== */
  --bg-base:        var(--slate-50);
  --bg-subtle:      var(--slate-100);
  --bg-inset:       var(--slate-150);

  --surface-card:   var(--slate-0);
  --surface-raised: var(--slate-0);
  --surface-sunken: var(--slate-50);
  --surface-panel:  #F1F4FA;      /* Felix-style soft tinted card */

  --border-subtle:  var(--slate-150);
  --border-default: var(--slate-200);
  --border-strong:  var(--slate-300);

  --text-primary:   var(--slate-900);
  --text-secondary: var(--slate-600);
  --text-muted:     var(--slate-500);
  --text-faint:     var(--slate-400);
  --text-inverse:   var(--slate-0);
  --text-link:      var(--blue-600);

  --brand:          var(--blue-600);
  --brand-hover:    var(--blue-700);
  --brand-active:   var(--blue-800);
  --brand-subtle:   var(--blue-50);
  --brand-subtle-2: var(--blue-100);
  --on-brand:       var(--slate-0);

  --accent:         var(--teal-600);
  --accent-subtle:  var(--teal-100);

  --success:        var(--green-600);
  --success-subtle: var(--green-100);
  --warning:        var(--amber-600);
  --warning-subtle: var(--amber-100);
  --danger:         var(--red-600);
  --danger-subtle:  var(--red-100);
  --info:           var(--blue-600);
  --info-subtle:    var(--blue-50);

  --focus-ring:     color-mix(in srgb, var(--blue-600) 45%, transparent);
  --overlay:        color-mix(in srgb, var(--slate-950) 45%, transparent);

  color-scheme: light;
}

/* ======================================================================
   SEMANTIC ALIASES — DARK
   Applied via [data-theme="dark"] OR .dark class. Also honors OS pref
   when no explicit choice is set (see :root[data-theme="auto"] fallback).
   ====================================================================== */
:root[data-theme="dark"],
.dark {
  --bg-base:        var(--slate-950);
  --bg-subtle:      #11161F;
  --bg-inset:       #0B0E15;

  --surface-card:   var(--slate-900);
  --surface-raised: #1E2535;
  --surface-sunken: #11161F;
  --surface-panel:  #161C28;

  --border-subtle:  #232B3A;
  --border-default: #2C3547;
  --border-strong:  #3A4458;

  --text-primary:   #EEF1F6;
  --text-secondary: #AFB9CC;
  --text-muted:     #8492A8;
  --text-faint:     #5C6781;
  --text-inverse:   var(--slate-900);
  --text-link:      var(--blue-400);

  --brand:          var(--blue-500);
  --brand-hover:    var(--blue-400);
  --brand-active:   var(--blue-300);
  --brand-subtle:   color-mix(in srgb, var(--blue-500) 18%, transparent);
  --brand-subtle-2: color-mix(in srgb, var(--blue-500) 28%, transparent);
  --on-brand:       #0A0E16;

  --accent:         var(--teal-500);
  --accent-subtle:  color-mix(in srgb, var(--teal-500) 20%, transparent);

  --success:        var(--green-500);
  --success-subtle: color-mix(in srgb, var(--green-500) 20%, transparent);
  --warning:        var(--amber-500);
  --warning-subtle: color-mix(in srgb, var(--amber-500) 20%, transparent);
  --danger:         var(--red-500);
  --danger-subtle:  color-mix(in srgb, var(--red-500) 20%, transparent);
  --info:           var(--blue-400);
  --info-subtle:    color-mix(in srgb, var(--blue-500) 18%, transparent);

  --focus-ring:     color-mix(in srgb, var(--blue-400) 55%, transparent);
  --overlay:        color-mix(in srgb, #000 60%, transparent);

  color-scheme: dark;
}