/* Recbolt: tokens de diseño v1
 * Claro y oscuro con light-dark() (Chrome 123 o superior).
 * Funciona en la página, en un contenedor con [data-theme] y dentro de un Shadow DOM (:host).
 *
 * Tema:
 *   automático            -> sigue el sistema (prefers-color-scheme)
 *   <html data-theme="light"> o <html data-theme="dark"> -> lo fuerza
 *   cualquier elemento con data-theme fuerza el tema solo en su interior.
 *
 * Regla de color: el rojo (--rb-rec) significa "grabando" y se usa también en el punto del logotipo.
 * Nunca para errores, botones principales ni descartar. Los botones principales van en tinta.
 * Los errores se muestran con --rb-warn, un icono y texto claro.
 */

:root,
:host {
  color-scheme: light dark;

  /* ---- Color: base ---- */
  --rb-paper:    light-dark(#EAF1F2, #071619); /* fondo */
  --rb-surface:  light-dark(#FFFFFF, #0F2226); /* paneles y tarjetas */
  --rb-ink:      light-dark(#0A1D22, #E4EEF0); /* texto principal */
  --rb-ink-2:    light-dark(#3F5258, #9DB3B8); /* texto secundario */
  --rb-ink-3:    light-dark(#4F6167, #7E959B); /* texto de apoyo */
  --rb-line:     light-dark(#CFDADD, #1D3A41); /* bordes y divisores */
  --rb-rec:      light-dark(#D40F35, #FF4D6D); /* grabando y logotipo */
  --rb-rec-deep: light-dark(#B00D2E, #FF7A92); /* rojo en hover (solo sobre la marca) */

  /* ---- Color: estados ---- */
  --rb-ok:   light-dark(#12753A, #3FCB8F);
  --rb-warn: light-dark(#846400, #E3B341); /* avisos y errores */
  --rb-info: light-dark(#2563B0, #5C9CFF); /* información y foco */

  /* ---- Color: roles (usar estos en componentes) ---- */
  --rb-bg:           var(--rb-paper);
  --rb-bg-raised:    var(--rb-surface);
  --rb-text:         var(--rb-ink);
  --rb-text-muted:   var(--rb-ink-2);
  --rb-text-subtle:  var(--rb-ink-3);
  --rb-border:       var(--rb-line);
  --rb-focus:        var(--rb-info);
  --rb-recording:    var(--rb-rec);

  --rb-btn-bg:         var(--rb-ink);   /* botón principal */
  --rb-btn-fg:         var(--rb-paper);
  --rb-btn-bg-hover:   var(--rb-ink-2);
  --rb-btn2-bg:        transparent;     /* botón secundario */
  --rb-btn2-fg:        var(--rb-ink);
  --rb-btn2-border:    var(--rb-line);
  --rb-btn2-bg-hover:  light-dark(#DCE7E9, #162E34);

  /* ---- Barra flotante y burbuja (siempre oscuras, sobre cualquier página) ---- */
  --rb-bar-bg:      light-dark(#0A1D22, #0F2226);
  --rb-bar-fg:      #E4EEF0;
  --rb-bar-hover:   #1D3A41;
  --rb-bar-divider: #1D3A41;
  --rb-bar-border:  light-dark(transparent, #1D3A41);
  --rb-bar-dot:     #FF4D6D;
  --rb-bubble-ring: #FFFFFF;

  /* ---- Tipografía ---- */
  --rb-font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rb-font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rb-font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --rb-fs-label: 12px;  --rb-lh-label: 16px;
  --rb-fs-ui:    14px;  --rb-lh-ui:    20px;
  --rb-fs-body:  17px;  --rb-lh-body:  26px;
  --rb-fs-sub:   24px;  --rb-lh-sub:   30px;
  --rb-fs-h2:    40px;  --rb-lh-h2:    44px;
  --rb-fs-h1:    58px;  --rb-lh-h1:    60px;

  --rb-fw-regular:  400;
  --rb-fw-medium:   500;
  --rb-fw-semibold: 600; /* titulares */
  --rb-fw-bold:     700; /* solo el logotipo */

  --rb-tracking-display: -0.035em;
  --rb-tracking-logo:    -0.045em;

  /* ---- Radios (a propósito distintos por tipo de elemento) ---- */
  --rb-radius-sm:   4px;     /* campos, etiquetas */
  --rb-radius-md:   8px;     /* botones */
  --rb-radius-lg:   12px;    /* paneles, ventana emergente */
  --rb-radius-pill: 999px;   /* barra flotante, burbuja, interruptores */
  --rb-radius-icon: 22%;     /* mosaico del icono de la extensión */

  /* ---- Sombras: solo dos; todo lo demás se resuelve con borde ---- */
  --rb-shadow-float: 0 1px 0 var(--rb-line), 0 10px 28px light-dark(rgb(10 29 34 / 0.22), rgb(0 0 0 / 0.55));
  --rb-shadow-pop:   0 1px 0 var(--rb-line), 0 4px 14px light-dark(rgb(10 29 34 / 0.14), rgb(0 0 0 / 0.45));

  /* ---- Espacio (base de 4 px) ---- */
  --rb-space-1: 4px;   --rb-space-2: 8px;   --rb-space-3: 12px;  --rb-space-4: 16px;
  --rb-space-5: 24px;  --rb-space-6: 32px;  --rb-space-7: 48px;  --rb-space-8: 64px;

  /* ---- Tamaños ---- */
  --rb-control-h:  36px;  /* alto de botones y botones de la barra */
  --rb-bubble:     84px;  /* burbuja de cámara */
  --rb-focus-ring: 3px;

  /* ---- Movimiento ---- */
  --rb-dur-fast: 120ms;
  --rb-dur:      200ms;
  --rb-dur-slow: 320ms;
  --rb-ease:     cubic-bezier(0.23, 1, 0.32, 1);

  /* ---- Capas (la barra y la burbuja flotan sobre la página) ---- */
  --rb-z-bubble: 2147483000;
  --rb-z-bar:    2147483001;
}

/* Tema forzado en la página completa o en cualquier contenedor */
/* El color de texto se hereda ya resuelto, así que un contenedor forzado debe volver a declararlo. */
[data-theme="light"] { color-scheme: light; color: var(--rb-text); }
[data-theme="dark"]  { color-scheme: dark;  color: var(--rb-text); }

@media (prefers-reduced-motion: reduce) {
  :root,
  :host {
    --rb-dur-fast: 0ms;
    --rb-dur: 0ms;
    --rb-dur-slow: 0ms;
  }
}