/* AMPM GPT · tokens.css · rediseño visual 2026-10-26
   Paleta: manual de marca AMPM, página 5 (MARCA/paleta-ampm.json). GPT negro/blanco es decisión de producto.
   Reemplaza app/styles/tokens.css. Los nombres anteriores se conservan como alias al final para no romper CSS existente. */

:root {
  color-scheme: light;
  font-family: Inter, -apple-system, "SF Pro Text", "Segoe UI", sans-serif;

  /* marca */
  --navy: #11284A;
  --navy-2: #1C3A66;
  --orange: #E87200;
  --orange-2: #FF8300;
  --amber: #FFA400;
  --blue: #0055BA;

  /* superficies */
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --rail: #FFFFFF;
  --line: #E6E8EC;
  --line-2: #D5D9E0;

  /* texto */
  --ink: #11284A;
  --ink-2: #4A5568;
  --ink-3: #8A94A6;
  --gpt-label: #000000;

  /* tintes */
  --tint-orange: #FFF3E6;
  --tint-blue: #EEF3FA;
  --tint-navy: #E8ECF3;

  /* estado (siempre con etiqueta textual) */
  --good: #1E7A4D;
  --bad: #B4232B;
  --good-bg: #E9F7EE;
  --bad-bg: #FDECEE;

  /* acción */
  --control: var(--navy);
  --control-text: #FFFFFF;
  --accent: var(--orange);
  --accent-text: #FFFFFF;
  --link: var(--blue);
  --focus-ring: 0 0 0 3px rgba(0, 85, 186, .15);

  /* forma */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --shadow-float: 0 12px 32px rgba(17, 40, 74, .10), 0 1px 2px rgba(17, 40, 74, .06);
  --shadow-card: 0 1px 2px rgba(17, 40, 74, .05);
  --backdrop: rgba(17, 40, 74, .5);

  /* gráfico */
  --chart-1: var(--navy);   /* GPT */
  --chart-2: var(--orange); /* Gemini · también el elemento líder */
  --chart-3: #5B86C8;       /* Claude */
  --chart-track: var(--bg);

  /* tipografía */
  --fs-xs: 12px;
  --fs-sm: 12.5px;
  --fs-ctl: 13.5px;
  --fs-md: 15px;
  --fs-body: 15.5px;
  --fs-lg: 17px;
  --fs-kpi: 22px;
  --fs-h2: 26px;
  --fs-h1: 30px;
  --fs-hero: 40px;
  --font-display: "Inter Display", Inter, sans-serif;
  --tracking-display: -0.02em;

  /* medidas */
  --rail-w: 264px;
  --rail-w-tablet: 220px;
  --topbar-h: 56px;
  --col-chat: 760px;
  --col-wide: 960px;
  --gutter: 28px;
  --gutter-mobile: 18px;

  --on-brand:var(--brand-white); --on-brand-muted:var(--brand-muted);
  --brand-logo-h:26px; --brand-logo-mobile-h:22px;
  --brand-white:#FFFFFF; --brand-muted:#B9C4D6; --brand-navy:#11284A; --brand-orange:#E87200;
  --white:#FFFFFF; --navy-contrast:#FFFFFF; --moon:#7FB3FF;
  --r-sheet:28px; --fs-auth-title:28px; --fs-email-title:24px;
  --r-pill:999px; --r-message:18px 18px 4px 18px; --r-composer-mobile:22px;
  --fs-mobile-input:16px; --fs-ui-title:14.5px;
  --code-bg:#0F1C33; --code-ink:#D6E0F0;
  --shadow:rgba(17,40,74,.06); --font-ui:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-family:var(--font-ui); color-scheme:light; --r-50: 50%; --r-0-32px-32px-0: 0 32px 32px 0; --r-14px: 14px; --r-10px: 10px; --r-16px: 16px; --r-20px: 20px; --r-13px: 13px; --r-7px: 7px; --r-6px: 6px; --r-4px: 4px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --orange: #FF8F2E;
  --blue: #7FB3FF;
  --bg: #0B1628;
  --surface: #132240;
  --rail: #0F1C33;
  --line: #22365A;
  --line-2: #2E4570;
  --ink: #F2F5FA;
  --ink-2: #B9C4D6;
  --ink-3: #7E8DA6;
  --gpt-label: #FFFFFF;
  --tint-orange: #3A2510;
  --tint-blue: #17315A;
  --tint-navy: #1A2D4F;
  --good-bg: #142820;
  --bad-bg: #2D191E;
  --control: var(--orange);
  --control-text: #11284A;
  --shadow-float: 0 12px 32px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
  --backdrop: rgba(0, 0, 0, .6);
  --chart-1: #5B86C8;
  --chart-track: var(--tint-navy);
}

/* Alias de los nombres anteriores, para que el CSS existente siga compilando mientras se migra.
   Eliminar cuando ningún archivo los use. */
:root, [data-theme="dark"] {
  --brand-ink: var(--navy);
  --brand-outline: var(--navy-2);
  --brand-accent: var(--orange);
  --ampm-blue: var(--navy);
  --panel: var(--surface);
  --sidebar: var(--rail);
  --text: var(--ink);
  --muted: var(--ink-2);
  --border: var(--line);
  --orange-soft: var(--tint-orange);
  --blue-soft: var(--tint-blue);
  --green: var(--good);
  --danger: var(--bad);
  --success-bg: var(--good-bg);
  --error-bg: var(--bad-bg);
  --focus-border: var(--blue);
  --selected-border: var(--line-2);
  --card-shadow: var(--shadow-card);
  --space-blue: var(--blue);
  --space-green: var(--good);
  --space-violet: var(--chart-3);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}