/* ============================================================================
   Konversa — Design tokens
   ----------------------------------------------------------------------------
   Copiado del design system "Konversa" (claude.ai/design), proyecto
   02ac615d-560b-4bf7-84b2-004edecce9f2. Reúne en un solo archivo el contenido
   de tokens/colors.css, typography.css, spacing.css, effects.css y motion.css.

   Las familias tipográficas (Baloo 2 + Nunito Sans) se cargan con <link> desde
   la propia página, no con @import, para no bloquear el render.

   CARGA: lo enlazan las páginas de cuenta (Layout = null, no cargan app.css ni
   inbox.css) y también Components/App.razor para el resto de la aplicación.
   En App.razor va ANTES de inbox.css a propósito: ambos declaran --text-muted
   con distinto valor, y así gana el de inbox.css para la UI existente. La capa
   konversa-app.css, que carga después, es la que reasigna la paleta completa.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- colors */
  /* base palette */
  --navy: #004066;
  --navy-900: #002a45;
  --navy-950: #00304d;
  --teal: #22a8af;
  --teal-600: #0b6e85;
  --mint: #46bdbc;
  --mint-200: #9be8e4;

  /* text on dark */
  --on-dark-body: #b6d3e1;
  --on-dark-body-panel: #daf0f4;
  --on-dark-muted: #8fb4c6;
  --on-dark-muted-panel: #c6e6ee;
  --on-dark-muted-soft: #9fd7dd;
  --on-dark-bubble: #eaf6f9;
  --on-dark-copyright: #6f97ac;

  /* ink on light */
  --ink-700: #3c5866;
  --ink-500: #5e7683;
  --ink-300: #93a8b3;

  /* lines & fills */
  --line: #dbe5ea;
  --line-soft: #e3eaee;
  --field-bg: #f7fafb;
  --white: #ffffff;

  /* third-party channel colour — glyph only, never as a surface */
  --whatsapp: #25d366;

  /* glass / veil layers */
  --glass-fill: rgba(255, 255, 255, 0.09);
  --glass-fill-strong: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-strong: rgba(255, 255, 255, 0.2);
  --glass-bubble-in: rgba(255, 255, 255, 0.14);
  --rule-on-dark: rgba(255, 255, 255, 0.22);

  --veil-navy: linear-gradient(180deg, rgba(0, 32, 52, 0.92) 0%, rgba(0, 48, 77, 0.86) 45%, rgba(0, 64, 102, 0.9) 100%);
  --gradient-panel: linear-gradient(158deg, #00304d 0%, #004066 46%, #0b6e85 100%);
  --halo-mint: radial-gradient(circle, rgba(70, 189, 188, 0.3), transparent 68%);
  --halo-mint-strong: radial-gradient(circle, rgba(70, 189, 188, 0.42), transparent 68%);
  --halo-teal: radial-gradient(circle, rgba(34, 168, 175, 0.26), transparent 70%);

  /* semantic aliases */
  --surface-page: var(--navy-900);
  --surface-card: var(--white);
  --surface-panel: var(--gradient-panel);
  --surface-field: var(--field-bg);
  --surface-field-focus: var(--white);
  --surface-glass: var(--glass-fill);

  --text-heading: var(--navy);
  --text-body: var(--ink-500);
  --text-label: var(--ink-700);
  /* OJO: --text-muted y --text-accent existen también en inbox.css con otro
     valor. Aquí no chocan porque este archivo solo lo carga el login; si algún
     día se carga junto a inbox.css, hay que renombrarlos antes. */
  --text-muted: var(--ink-300);
  --text-accent: var(--mint);
  --text-link: var(--teal);
  --text-on-dark: var(--on-dark-body);
  --text-on-dark-muted: var(--on-dark-muted);

  --border-field: var(--line);
  --border-field-focus: var(--teal);
  --border-divider: var(--line-soft);

  --action-primary-bg: var(--navy);
  --action-primary-bg-hover: var(--teal);
  --action-primary-fg: var(--white);
  --focus-ring: 0 0 0 4px rgba(34, 168, 175, 0.18);
  --accent-control: var(--teal);
  --status-online: var(--mint);

  /* ------------------------------------------------------------ typography */
  --font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-sans: "Nunito Sans", -apple-system, "Segoe UI", system-ui, sans-serif;

  --weight-thin: 200;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* sizes — valores exactos de la especificación del login */
  --size-h1-display: 64px;   /* Baloo 2 / 700 — H1 del panel flotante */
  --size-h1-light: 43px;     /* Nunito Sans / 200 — H1 sobre fotografía */
  --size-h2: 34px;           /* Baloo 2 / 700 — encabezado del formulario */
  --size-metric: 30px;       /* Baloo 2 / 700 */
  --size-lead-lg: 21px;      /* Nunito Sans / 400 — bajada del panel */
  --size-lead: 18px;         /* Nunito Sans / 400 — bajada sobre navy */
  --size-button: 17px;       /* Baloo 2 / 700 */
  --size-body: 15px;         /* Nunito Sans / 400 — campos y texto corrido */
  --size-label: 13px;        /* Nunito Sans / 700 — etiquetas de campo */
  --size-bubble: 13px;
  --size-meta: 14px;
  --size-caption: 12px;      /* eyebrow, divisor, pie */
  --size-metric-label: 11px;

  --leading-display: 1;
  --leading-body: 1.45;
  --leading-bubble: 1.4;

  --tracking-display: -0.015em;
  --tracking-h2: -0.01em;
  --tracking-eyebrow: 0.2em;
  --tracking-metric-label: 0.13em;
  --tracking-divider: 0.06em;

  --measure-lead: 410px;
  --measure-lead-narrow: 400px;

  /* --------------------------------------------------------------- spacing */
  /* Escala irregular, ajustada a mano — no es una malla de 4/8px. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;   /* separación de la pila de chat */
  --space-4: 18px;   /* padding de la tarjeta mock */
  --space-5: 20px;   /* separación entre campos */
  --space-6: 22px;   /* inset exterior del panel */
  --space-7: 24px;   /* separación de la columna de formulario */
  --space-8: 26px;   /* separación interna del panel */
  --space-9: 28px;
  --space-10: 38px;
  --space-11: 40px;
  --space-12: 44px;  /* separación de la franja de métricas */
  --space-13: 52px;  /* padding del panel */
  --space-14: 56px;  /* padding vertical de la columna izquierda */

  /* control sizing */
  --control-height-input: 50px;
  --control-height-cta: 52px;
  --control-height-min-touch: 44px;
  --control-padding-inline: 16px;
  --checkbox-size: 17px;

  /* layout */
  --column-hero: 520px;
  --column-form: 392px;
  --mock-width: 352px;
  --breakpoint-collapse: 960px;

  /* --------------------------------------------------------------- effects */
  --radius-bubble-tail: 4px;
  --radius-icon: 10px;
  --radius-control: 12px;   /* inputs + CTA */
  --radius-bubble: 14px;
  --radius-mock: 20px;
  --radius-card: 24px;
  --radius-panel: 26px;     /* panel de marca flotante */
  --radius-pill: 999px;

  --border-width-field: 1.5px;
  --border-width-hairline: 1px;

  --shadow-card: 0 40px 90px -44px rgba(0, 20, 34, 0.9);
  --shadow-mock: 0 26px 50px -28px rgba(0, 20, 34, 0.8);
  --shadow-focus: 0 0 0 4px rgba(34, 168, 175, 0.18);

  --blur-glass: blur(8px);

  /* ---------------------------------------------------------------- motion */
  /* Una sola duración en todo el sistema: 0.18s ease. */
  --duration-fast: 0.18s;
  --easing-standard: ease;
  --transition-field: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  --transition-action: background 0.18s ease, color 0.18s ease;
}