/* Base Coccoa: tokens del sistema visual (diseño y colores de la landing).

   Fuente única para todo lo que no es la landing: dashboard interno y, desde la
   Fase 3, las páginas públicas. Los valores son los de landing/_coccoa_shell.html
   (fuera de alcance, conserva su copia en línea); tests/test_coccoa_dashboard.py
   falla si las dos copias se separan.

   Modo claro por defecto. El oscuro aplica solo con data-theme="dark" en <html>,
   que pone el visitante desde el selector (localStorage 'coccoa-theme'); la
   preferencia del sistema operativo no cambia el modo.

   Un tema de marca (Fase 4) solo puede reemplazar estos --c-* en rutas públicas
   de una marca; el dashboard interno nunca carga un tema. */

:root {
  color-scheme: light;

  /* Superficies */
  --c-bg: #f4f5f7;
  --c-bg-top: #ffffff;
  --c-surface: #ffffff;
  --c-input-bg: #ffffff;
  --c-hover: #f2f3f5;
  --c-header-bg: rgba(255, 255, 255, 0.92);

  /* Texto */
  --c-ink: #16181d;
  --c-muted: #6b7280;
  --c-placeholder: #a3a8b3;

  /* Bordes */
  --c-border: #e8eaee;
  --c-border-soft: #eef0f3;
  --c-border-strong: #e1e3e8;
  --c-border-hover: #c9ccd3;
  --c-input-border: #e5e7eb;

  /* Acción principal (botón negro de la landing) */
  --c-btn-bg: #141414;
  --c-btn-ink: #ffffff;
  --c-btn-hover: #2a2a2a;
  --c-focus-ring: rgba(20, 20, 20, 0.08);

  /* Acentos Coccoa: fucsia y lima, siempre pequeños */
  --c-pink: #ff057d;
  --c-brand-ink: #d4006a;
  --c-brand-soft: #fff2f7;
  --c-brand-border: #ffd6e8;
  --c-lime: #c2ff1a;
  --c-lime-ink: #3b6600;
  --c-lime-soft: #f3ffd9;
  --c-night: #151515;
  --c-pass-border: #151515;

  /* Estados. ok viene de la landing; aviso del layout público (--lp-alert-*);
     error del rojo que ya usa la cuenta de compradores. */
  --c-ok-ink: #146c43;
  --c-ok-bg: #e6f4ec;
  --c-ok-border: #bfe3cf;
  --c-warn-ink: #6f4517;
  --c-warn-bg: #fff7e8;
  --c-warn-border: #f0d39d;
  --c-danger-ink: #b42318;
  --c-danger-bg: #fdecea;
  --c-danger-border: #f5c2bd;

  /* Sombras */
  --c-shadow-card: 0 20px 40px -28px rgba(20, 24, 32, 0.18);
  --c-shadow-raised: 0 20px 40px -28px rgba(20, 24, 32, 0.22);
  --c-shadow-pop: 0 18px 40px -18px rgba(20, 24, 32, 0.28);
  --c-shadow-dialog: 0 30px 80px -20px rgba(0, 0, 0, 0.45);

  /* Velo detrás de diálogos y paneles (el de la landing) */
  --c-scrim: rgba(10, 10, 12, 0.55);

  /* Tipografía: la pila del sistema de la landing, sin fuentes web */
  --c-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --c-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Radios de la landing: controles 8, tarjetas 10-12, tarjetas grandes 14, diálogos 16 */
  --c-radius-control: 8px;
  --c-radius-card: 12px;
  --c-radius-lg: 14px;
  --c-radius-dialog: 16px;
  --c-radius-pill: 999px;

  --c-gutter: clamp(16px, 5vw, 24px);

  /* Capa de tema (Fase 4). Sin tema valen lo mismo que la base: solo las usan
     las páginas públicas y un Estilo de marca las reemplaza (brand_theme.py).
     El fondo de página (--c-page-bg, --c-page-blur, --c-page-overlay,
     --c-page-media-opacity) NO se define aquí: solo lo emite un tema, y
     public.css cae al valor por defecto de cada página (p. ej. el flyer). */
  --c-heading: var(--c-ink);
  --c-font-heading: var(--c-font);
  --c-heading-transform: none;
  --c-heading-tracking: -0.02em;
  --c-heading-scale: 1;
  --c-heading-shadow: none;
  --c-btn-fill: var(--c-btn-bg);
  --c-btn-fill-ink: var(--c-btn-ink);
  --c-btn-outline: transparent;
  --c-popover-bg: var(--c-surface);
  --c-btn-transform: none;
  --c-radius-input: var(--c-radius-control);
  --c-border-width: 1px;
  --c-border-style: solid;
  --c-surface-blur: 0px;
  --c-qty-bg: var(--c-hover);
  --c-qty-ink: var(--c-ink);
  --c-qty-radius: var(--c-radius-control);
  --c-space: 1;
  --c-soldout-border-style: solid;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --c-bg: #0b0b0c;
  --c-bg-top: #121214;
  --c-surface: #151517;
  --c-input-bg: #101012;
  --c-hover: #1e1f22;
  --c-header-bg: rgba(14, 14, 15, 0.88);

  --c-ink: #f3f4f6;
  --c-muted: #9ca0a8;
  --c-placeholder: #5d6068;

  --c-border: #25262a;
  --c-border-soft: #1f2023;
  --c-border-strong: #34363b;
  --c-border-hover: #4a4c52;
  --c-input-border: #2c2e33;

  --c-btn-bg: #ffffff;
  --c-btn-ink: #141414;
  --c-btn-hover: #e4e4e4;
  --c-focus-ring: rgba(255, 255, 255, 0.1);

  --c-brand-ink: #ff6bb2;
  --c-brand-soft: rgba(255, 5, 125, 0.13);
  --c-brand-border: rgba(255, 5, 125, 0.3);
  --c-lime-ink: #c2ff1a;
  --c-lime-soft: rgba(194, 255, 26, 0.1);
  --c-pass-border: #2a2a2d;

  --c-ok-ink: #6fd69b;
  --c-ok-bg: rgba(52, 168, 100, 0.16);
  --c-ok-border: rgba(52, 168, 100, 0.35);
  --c-warn-ink: #f3d9a6;
  --c-warn-bg: #2a2114;
  --c-warn-border: #5c4520;
  --c-danger-ink: #ff8a80;
  --c-danger-bg: rgba(255, 90, 80, 0.14);
  --c-danger-border: rgba(255, 90, 80, 0.35);

  --c-shadow-card: 0 20px 40px -28px rgba(0, 0, 0, 0.6);
  --c-shadow-raised: 0 20px 40px -28px rgba(0, 0, 0, 0.7);
  --c-shadow-pop: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  --c-scrim: rgba(0, 0, 0, 0.65);
}