/* =====================================================
   METEOR DS — Tokens (copia verbatim del frontend de meteorus)
   Fuente: apps/meteorus/frontend/src/styles/tokens/*
   NO editar a mano: mantener en sync con la fuente.
   Capas: primitives -> workspace brand -> semantic (light/dark)
          + typography + spacing/radius/motion
   ===================================================== */

/* =====================================================
   METEOR DS — Capa 1: PRIMITIVE TOKENS
   Valores crudos. No se referencian en componentes.
   Fuente de verdad: meteor-design-system.html v1.0
   ===================================================== */

:root {
  /* ---- Brand green — escala derivada de #09B44B ---- */
  --green-50:  #E8FBF1;
  --green-100: #C8F4DC;
  --green-200: #93E9B9;
  --green-300: #5BDC93;
  --green-400: #27CA6E;
  --green-500: #09B44B;
  --green-600: #07943D;
  --green-700: #067531;
  --green-800: #065827;
  --green-900: #053C1C;
  --green-950: #022712;

  /* ---- Neutrals — cool gray con tinte verdoso sutil ---- */
  --gray-0:    #FFFFFF;
  --gray-50:   #F7F8F8;
  --gray-100:  #EEF0F1;
  --gray-150:  #E4E7E9;
  --gray-200:  #D6DADE;
  --gray-300:  #BCC2C8;
  --gray-400:  #8F97A0;
  --gray-500:  #68707A;
  --gray-600:  #4C535C;
  --gray-700:  #363B42;
  --gray-800:  #23272D;
  --gray-900:  #16181C;
  --gray-950:  #0B0D10;
  --gray-1000: #030405;

  /* ---- Semantic hues ---- */
  --red-100:    #FBE3E4;
  --red-500:    #E5484D;
  --red-600:    #CE2C31;
  --amber-100:  #FEEFD3;
  --amber-500:  #F5A524;
  --amber-600:  #D48610;
  --blue-100:   #DBEAFE;
  --blue-500:   #3B82F6;
  --blue-600:   #2563EB;
  --violet-100: #EDE9FE;
  --violet-500: #8B5CF6;

  /* ---- Accents para tarjetas de agente ---- */
  --accent-indigo: #A7B3FF;
  --accent-violet: #C9B6FF;
  --accent-pink:   #F3C7E8;
  --accent-mint:   #9EE8C1;
  --accent-sky:    #A9DCF5;
  --accent-peach:  #FBCFB1;
}


/* =====================================================
   METEOR DS — Capa 2: WORKSPACE BRAND TOKENS
   Cada workspace define sus propios brand-* primitivos.
   El tema (light/dark) consume estos tokens semanticos.
   ===================================================== */

/* Meteor (default) — verde #09B44B */
[data-workspace="meteor"],
:root {
  --brand-50:  #E8FBF1;
  --brand-100: #C8F4DC;
  --brand-200: #93E9B9;
  --brand-300: #5BDC93;
  --brand-400: #27CA6E;
  --brand-500: #09B44B;
  --brand-600: #07943D;
  --brand-700: #067531;
  --brand-800: #065827;
  --brand-900: #053C1C;
  --brand-contrast: #062A13;
}

/* Sunset — naranja */
[data-workspace="sunset"] {
  --brand-50:  #FFF4EC;
  --brand-100: #FFE1CB;
  --brand-200: #FFC08E;
  --brand-300: #FD9A54;
  --brand-400: #F77927;
  --brand-500: #EA580C;
  --brand-600: #C5440A;
  --brand-700: #9F3509;
  --brand-800: #7A2908;
  --brand-900: #591D07;
  --brand-contrast: #FFFFFF;
}

/* Cosmic — violeta */
[data-workspace="cosmic"] {
  --brand-50:  #F3EEFF;
  --brand-100: #E4D7FF;
  --brand-200: #CAB1FF;
  --brand-300: #A888FF;
  --brand-400: #8B63FB;
  --brand-500: #7C3AED;
  --brand-600: #6425C7;
  --brand-700: #4E1BA0;
  --brand-800: #38147A;
  --brand-900: #250E56;
  --brand-contrast: #FFFFFF;
}

/* Ocean — azul */
[data-workspace="ocean"] {
  --brand-50:  #E7F4FD;
  --brand-100: #C7E5FB;
  --brand-200: #8DCCF6;
  --brand-300: #4FB0EE;
  --brand-400: #1795E0;
  --brand-500: #0284C7;
  --brand-600: #0369A1;
  --brand-700: #045281;
  --brand-800: #053D61;
  --brand-900: #042944;
  --brand-contrast: #FFFFFF;
}

/* Ember — rojo */
[data-workspace="ember"] {
  --brand-50:  #FFECEF;
  --brand-100: #FFCBD3;
  --brand-200: #FF96A5;
  --brand-300: #FA6177;
  --brand-400: #EC3651;
  --brand-500: #E11D48;
  --brand-600: #BA143A;
  --brand-700: #930E2D;
  --brand-800: #6E0A22;
  --brand-900: #4A0717;
  --brand-contrast: #FFFFFF;
}


/* =====================================================
   METEOR DS — Capa 3: SEMANTIC TOKENS — LIGHT
   Componentes consumen SOLO estos tokens.
   ===================================================== */

[data-theme="light"] {
  /* Surfaces */
  --surface-canvas:  #F7F8F8;
  --surface-base:    #FFFFFF;
  --surface-raised:  #FFFFFF;
  --surface-sunken:  #EEF0F1;
  --surface-overlay: rgba(11, 13, 16, .48);
  --surface-subtle:  rgba(9, 180, 75, .06);
  /* Superficie invertida OPACA (tooltips, hints): combina con --text-inverse. */
  --surface-inverse: #16181C;

  /* Text */
  --text-primary:   #16181C;
  --text-secondary: #4C535C;
  --text-tertiary:  #68707A;
  --text-quartiary: #8F97A0;
  --text-disabled:  #BCC2C8;
  --text-inverse:   #FFFFFF;
  --text-brand:     var(--brand-700);
  --text-on-brand:  var(--brand-contrast);

  /* Borders */
  --border-subtle:  #EEF0F1;
  --border-default: #D6DADE;
  --border-strong:  #8F97A0;
  --border-brand:   var(--brand-500);
  --border-focus:   var(--brand-500);

  /* Actions (brand / primario) */
  --action-primary:        var(--brand-500);
  --action-primary-hover:  var(--brand-600);
  --action-primary-active: var(--brand-700);
  --action-primary-subtle: var(--brand-50);
  --action-primary-soft:   var(--brand-100);

  /* Actions (neutros) */
  --action-neutral:        #16181C;
  --action-neutral-hover:  #363B42;
  --action-neutral-subtle: #EEF0F1;

  /* Feedback */
  --success:        #067531;
  --success-bg:     #E8FBF1;
  --success-border: #93E9B9;
  --warning:        #B46A08;
  --warning-bg:     #FEEFD3;
  --warning-border: #F6D28A;
  --danger:         #B91C1C;
  --danger-bg:      #FBE3E4;
  --danger-border:  #F2A9AD;
  --info:           #2563EB;
  --info-bg:        #DBEAFE;
  --info-border:    #A8C5F9;

  /* Sidebar */
  --sidebar-bg:               #FFFFFF;
  --sidebar-item:             transparent;
  --sidebar-item-hover:       #EEF0F1;
  --sidebar-item-active:      var(--brand-50);
  --sidebar-item-active-text: var(--brand-700);

  /* Chat */
  --chat-bg:           transparent;
  --bubble-agent-bg:   #EEF0F1;
  --bubble-agent-text: #16181C;
  --bubble-user-bg:    var(--brand-500);
  --bubble-user-text:  var(--brand-contrast);
  --bubble-outbound-bg:   #E8FBF1;
  --bubble-outbound-text: #16181C;

  /* Agent card gradient */
  --agent-card-grad: linear-gradient(180deg, #A9DCF5 0%, #CAB1FF 100%);

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(15, 23, 20, .04), 0 0 0 1px rgba(15, 23, 20, .02);
  --shadow-sm:    0 1px 3px rgba(15, 23, 20, .06), 0 1px 2px rgba(15, 23, 20, .04);
  --shadow-md:    0 4px 8px -2px rgba(15, 23, 20, .08), 0 2px 4px -2px rgba(15, 23, 20, .06);
  --shadow-lg:    0 12px 24px -6px rgba(15, 23, 20, .10), 0 4px 8px -4px rgba(15, 23, 20, .06);
  --shadow-xl:    0 24px 48px -12px rgba(15, 23, 20, .14);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--brand-500) 28%, transparent);

  color-scheme: light;
}


/* =====================================================
   METEOR DS — Capa 3: SEMANTIC TOKENS — DARK
   ===================================================== */

[data-theme="dark"] {
  /* Surfaces */
  --surface-canvas:  #0B0D10;
  --surface-base:    #16181C;
  --surface-raised:  #1E2126;
  --surface-sunken:  #0B0D10;
  --surface-overlay: rgba(0, 0, 0, .64);
  --surface-subtle:  rgba(39, 202, 110, .10);
  /* Superficie invertida OPACA (tooltips, hints): combina con --text-inverse. */
  --surface-inverse: #F7F8F8;

  /* Text */
  --text-primary:   #F7F8F8;
  --text-secondary: #BCC2C8;
  --text-tertiary:  #8F97A0;
  --text-quartiary: #68707A;
  --text-disabled:  #4C535C;
  --text-inverse:   #16181C;
  --text-brand:     var(--brand-300);
  --text-on-brand:  var(--brand-contrast);

  /* Borders */
  --border-subtle:  #23272D;
  --border-default: #363B42;
  --border-strong:  #68707A;
  --border-brand:   var(--brand-400);
  --border-focus:   var(--brand-400);

  /* Actions */
  --action-primary:        var(--brand-500);
  --action-primary-hover:  var(--brand-400);
  --action-primary-active: var(--brand-300);
  --action-primary-subtle: rgba(39, 202, 110, .10);
  --action-primary-soft:   rgba(39, 202, 110, .18);

  --action-neutral:        #F7F8F8;
  --action-neutral-hover:  #EEF0F1;
  --action-neutral-subtle: #23272D;

  /* Feedback */
  --success:        #5BDC93;
  --success-bg:     rgba(39, 202, 110, .14);
  --success-border: rgba(39, 202, 110, .35);
  --warning:        #FBBF24;
  --warning-bg:     rgba(245, 165, 36, .14);
  --warning-border: rgba(245, 165, 36, .35);
  --danger:         #F87171;
  --danger-bg:      rgba(229, 72, 77, .16);
  --danger-border:  rgba(229, 72, 77, .40);
  --info:           #60A5FA;
  --info-bg:        rgba(59, 130, 246, .14);
  --info-border:    rgba(59, 130, 246, .40);

  /* Sidebar */
  --sidebar-bg:               #0F1114;
  --sidebar-item:             transparent;
  --sidebar-item-hover:       #1E2126;
  --sidebar-item-active:      rgba(39, 202, 110, .14);
  --sidebar-item-active-text: var(--brand-300);

  /* Chat */
  --chat-bg:           transparent;
  --bubble-agent-bg:   #23272D;
  --bubble-agent-text: #F7F8F8;
  --bubble-user-bg:    var(--brand-500);
  --bubble-user-text:  var(--brand-contrast);
  --bubble-outbound-bg:   #1b2a25;
  --bubble-outbound-text: #F7F8F8;

  --agent-card-grad: linear-gradient(180deg, #1A2A52 0%, #2E1A52 100%);

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm:    0 2px 4px rgba(0, 0, 0, .32);
  --shadow-md:    0 6px 12px rgba(0, 0, 0, .40);
  --shadow-lg:    0 14px 28px rgba(0, 0, 0, .50);
  --shadow-xl:    0 28px 56px rgba(0, 0, 0, .60);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--brand-400) 40%, transparent);

  color-scheme: dark;
}


/* =====================================================
   METEOR DS — Typography tokens
   ===================================================== */

:root {
  /* ---- Font families ---- */
  --font-family: "Eudoxus Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (clamp para fluid en display) ---- */
  --fs-display-xl: clamp(40px, 5.2vw, 64px);
  --fs-display-lg: clamp(32px, 4.2vw, 48px);
  --fs-display-md: 36px;
  --fs-h-xl:       28px;
  --fs-h-lg:       22px;
  --fs-h-md:       18px;
  --fs-h-sm:       16px;
  --fs-body-lg:    16px;
  --fs-body-md:    14px;
  --fs-body-sm:    13px;
  --fs-body-xs:    12px;
  --fs-caption:    11px;

  /* ---- Line heights ---- */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
}


/* =====================================================
   METEOR DS — Spacing, Radius, Motion
   ===================================================== */

:root {
  /* ---- Spacing (base 4px) ---- */
  --space-0:   0;
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ---- Radius ---- */
  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-4xl:  32px;
  --radius-full: 9999px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 100ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --dur-4: 320ms;
  --dur-5: 480ms;
}