/* Spoter Design System — Tokens (piloto Conversaciones)
   Portado verbatim de docs/spoter_design_system/tokens/{palette,semantic,typography,spacing}.css
   Reemplaza a las variables --sp-* de webroot/css/themes/theme-{light,dark}.css. */

/* ══ Paleta (raw, theme-independent) ══ */
:root {
  /* ── Brand · Spoter Pink ───────────────────────────── */
  --pink-50:  #fdeaf3;
  --pink-100: #fbd0e2;
  --pink-300: #f185b6;
  --pink-500: #e42d7f;
  --pink-600: #c8226d;
  --pink-700: #a7004b;

  /* ── Brand · Deep Indigo ───────────────────────────── */
  --indigo-900: #2e245a;
  --indigo-800: #423678;
  --indigo-700: #4a4a7f;
  --indigo-500: #616193;
  --indigo-300: #a6a6cc;
  --indigo-100: #d6d6ea;

  /* ── Secondary & interactive ───────────────────────── */
  --mint-400: #2bdaa8;
  --mint-500: #28cd9e;
  --blue-400: #2196f3;
  --blue-500: #0088ff;
  --blue-600: #1a6fc4;
  --cyan-500: #32ade6;

  /* ── Neutral ramp · Light ──────────────────────────── */
  --grey-0:   #ffffff;
  --grey-25:  #f6f7f9;
  --grey-50:  #efeff5;
  --grey-100: #dde2e6;
  --grey-200: #ced4da;
  --grey-300: #abb0c1;
  --grey-400: #adb5bd;
  --grey-500: #797e8f;
  --grey-600: #656e83;
  --grey-700: #424a5b;
  --grey-900: #212529;

  /* ── Neutral ramp · Dark ───────────────────────────── */
  --ink-0:   #0a0a0a;
  --ink-50:  #141414;
  --ink-100: #1c1c1f;
  --ink-150: #232327;
  --ink-200: #2b2b30;
  --ink-300: #38383f;
  --ink-400: #4a4a52;

  /* ── Status hues ───────────────────────────────────── */
  --green-500:  #28a745;
  --green-600:  #009951;
  --red-500:    #dc3545;
  --red-600:    #c00f0c;
  --amber-400:  #ffc107;
  --orange-500: #ff9500;
  --info-500:   #0288d1;

  --green-bright:  #4ae968;
  --red-bright:    #ff6961;
  --amber-bright:  #ffb340;
  --blue-bright:   #5cb8ff;

  /* ── Data-viz · categorical set ────────────────────── */
  --dv-indigo: #2e245a;
  --dv-pink:   #e42d7f;
  --dv-mint:   #2bdaa8;
  --dv-blue:   #0088ff;
  --dv-cyan:   #32ade6;
  --dv-orange: #ff9500;
  --dv-amber:  #ffc107;
  --dv-slate:  #616193;

  --state-neutral:   #797e8f;
  --state-discovery: #616193;
  --state-live:      #2bdaa8;
  --state-attention: #ff9500;
  --state-highlight: #e42d7f;

  /* ── WhatsApp-style chat canvas ────────────────────── */
  --wa-canvas-light:   #efeae2;
  --wa-canvas-dark:    #0b141a;
  --wa-bubble-in:      #ffffff;
  --wa-bubble-out:     #d9fdd3;
  --wa-bubble-in-dk:   #1f2c33;
  --wa-bubble-out-dk:  #144d37;
}

/* ══ Semántica (role tokens) — la única capa de color que deben usar los componentes ══ */
:root, [data-theme="light"], .light {
  --surface-app:      var(--grey-25);
  --surface-default:  var(--grey-0);
  --surface-raised:   var(--grey-0);
  --surface-sunken:   var(--grey-50);
  --surface-field:    var(--grey-0);
  --surface-brand:    var(--indigo-900);
  --surface-hover:    var(--grey-50);

  --text-primary:     var(--grey-900);
  --text-secondary:   var(--grey-600);
  --text-muted:       var(--grey-700);
  --text-placeholder: var(--grey-300);
  --text-on-brand:    #ffffff;
  --text-link:        var(--blue-500);

  --border-default:   var(--grey-100);
  --border-strong:    var(--grey-400);
  --border-focus:     var(--indigo-900);
  --accent-primary:   var(--indigo-900);
  --accent-pink:      var(--pink-500);
  --accent-mint:      var(--mint-400);

  --status-success:   var(--green-500);
  --status-danger:    var(--red-500);
  --status-warning:   var(--amber-400);
  --status-info:      var(--info-500);
  --status-success-bg: #d5f8ee;
  --status-danger-bg:  #fcdde0;
  --status-warning-bg: #fef8dd;
  --status-info-bg:    #e6f2fb;

  --chat-canvas:      var(--wa-canvas-light);
  --chat-bubble-in:   var(--wa-bubble-in);
  --chat-bubble-out:  var(--wa-bubble-out);
  --chat-bubble-system: var(--blue-600);

  --glass-bg:      rgba(255, 255, 255, 0.55);
  --glass-border:  rgba(255, 255, 255, 0.65);
  --glass-blur:    16px;

  --neu-bg:        #eef0f4;
  --neu-light:     rgba(255, 255, 255, 0.90);
  --neu-dark:      rgba(174, 178, 196, 0.55);
}

[data-theme="dark"], .dark {
  --surface-app:      var(--ink-50);
  --surface-default:  var(--ink-100);
  --surface-raised:   var(--ink-150);
  --surface-sunken:   var(--ink-0);
  --surface-field:    var(--ink-150);
  --surface-brand:    var(--indigo-700);
  --surface-hover:    var(--ink-200);

  --text-primary:     #e1e1e1;
  --text-secondary:   #abb0c1;
  --text-muted:       #c4c8d4;
  --text-placeholder: #6b6f7d;
  --text-on-brand:    #ffffff;
  --text-link:        var(--blue-bright);

  --border-default:   var(--ink-300);
  --border-strong:    var(--ink-400);
  --border-focus:     var(--indigo-300);
  --accent-primary:   var(--pink-500);
  --accent-pink:      var(--pink-500);
  --accent-mint:      var(--mint-400);

  --status-success:   var(--green-bright);
  --status-danger:    var(--red-bright);
  --status-warning:   var(--amber-bright);
  --status-info:      var(--blue-bright);
  --status-success-bg: #0c4a3a;
  --status-danger-bg:  #3a1b1e;
  --status-warning-bg: #3a2e12;
  --status-info-bg:    #12263a;

  --chat-canvas:      var(--wa-canvas-dark);
  --chat-bubble-in:   var(--wa-bubble-in-dk);
  --chat-bubble-out:  var(--wa-bubble-out-dk);
  --chat-bubble-system: var(--blue-600);

  --glass-bg:      rgba(28, 28, 31, 0.55);
  --glass-border:  rgba(255, 255, 255, 0.10);
  --glass-blur:    18px;

  --neu-bg:        #1a1a1e;
  --neu-light:     rgba(58, 58, 66, 0.55);
  --neu-dark:      rgba(0, 0, 0, 0.55);
}

/* ══ Tipografía ══ */
:root {
  --font-display: 'Public Sans', system-ui, sans-serif;
  --font-body:    'Roboto', system-ui, sans-serif;
  --font-ui:      'Inter', system-ui, sans-serif;
  --font-mono:    'Cousine', ui-monospace, 'SF Mono', monospace;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --text-display: 96px;
  --text-h1:      32px;
  --text-h2:      24px;
  --text-h3:      20px;
  --text-h4:      16px;
  --text-body-lg: 16px;
  --text-body:    14px;
  --text-body-sm: 13px;
  --text-caption: 12px;
  --text-micro:   11px;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;

  --tracking-tight: -0.01em;
  --tracking-wide:   0.02em;
}

/* ══ Espaciado, radios, bordes, elevación, motion ══ */
:root, [data-theme="light"], .light {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  --border-width: 1px;

  --shadow-xs:  0 1px 2px rgba(34, 37, 47, 0.06);
  --shadow-sm:  0 1px 3px rgba(34, 37, 47, 0.10), 0 1px 2px rgba(34, 37, 47, 0.06);
  --shadow-md:  0 4px 12px rgba(34, 37, 47, 0.10);
  --shadow-lg:  0 12px 28px rgba(34, 37, 47, 0.14);
  --shadow-pop: 0 20px 48px rgba(34, 37, 47, 0.20);
  --shadow-focus-pink:   0 0 0 3px rgba(228, 45, 127, 0.25);
  --shadow-focus-indigo: 0 0 0 3px rgba(46, 36, 90, 0.22);

  --shadow-neu:        6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
  --shadow-neu-sm:     3px 3px 7px var(--neu-dark), -3px -3px 7px var(--neu-light);
  --shadow-neu-inset:  inset 4px 4px 9px var(--neu-dark), inset -4px -4px 9px var(--neu-light);

  --glass-shadow: 0 8px 32px rgba(46, 36, 90, 0.16);

  --dur-fast:   120ms;
  --dur-normal: 200ms;
  --dur-slow:   320ms;
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
}

[data-theme="dark"], .dark {
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md:  0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-lg:  0 14px 32px rgba(0, 0, 0, 0.60);
  --shadow-pop: 0 24px 52px rgba(0, 0, 0, 0.70);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}