/*
 * Tokens de marca JuaniCate (fuente: docs/marca.md, del tablero «JuaniCate —
 * Branding» de Claude Design). Único lugar con colores y tipografías: el resto
 * del CSS usa solo estas variables. Regla 70 · 20 · 10: fondo crema, verde
 * Hass, acentos.
 *
 * Excepciones: Verde Hass (#1f2b1c) se repite donde no se aceptan variables
 * CSS: <meta name="theme-color"> en src/Views/layout.php y public/offline.html,
 * theme_color y background_color en public/manifest.json, el fondo de los
 * íconos en scripts/generar_iconos.ps1 y los colores del PDF en
 * src/Billing/BillingService.php. Si cambia --color-hass, cámbialo allí también.
 */
:root {
    /* Paleta de marca */
    --color-hass: #1f2b1c;   /* primario: logo, títulos, fondos de marca */
    --color-musgo: #4f5e26;  /* secundario: rótulos, enlaces */
    --color-lima: #b7c25a;   /* acento: solo sobre Verde Hass, nunca texto sobre crema */
    --color-cacao: #4a2f24;  /* exclusivo de la línea brownies */
    --color-crema: #f4f0e6;  /* fondo dominante */
    --color-arena: #d8ccb2;  /* líneas, bordes, tablas */
    --color-texto2: #3e3d36; /* texto secundario */
    --color-blanco: #ffffff;
    --color-rojo: #9b1c1c;

    /* Centros de costos: solo en puntos, barras y bordes. */
    --color-center-fruits: var(--color-musgo);
    --color-center-brownies: var(--color-cacao);
    --color-center-general: var(--color-arena);

    /* Usos */
    --color-text: var(--color-hass);
    /* Texto secundario: 9,6:1 sobre crema, 10,9:1 sobre blanco. */
    --color-text-muted: var(--color-texto2);
    --color-text-inverse: var(--color-crema);
    --color-text-inverse-muted: rgba(244, 240, 230, 0.78);
    --color-bg-dark: var(--color-hass);
    --color-bg-darker: #141c12;
    --color-surface: var(--color-crema);
    --color-surface-raised: var(--color-blanco);
    --color-surface-soft: #ebe4d3;
    --color-primary: var(--color-hass);
    --color-primary-text: var(--color-crema);
    --color-link: var(--color-musgo);
    --color-label: var(--color-musgo);
    --color-accent: var(--color-lima);
    --color-accent-strong: var(--color-musgo);
    --color-border: var(--color-arena);
    --color-focus: var(--color-musgo);
    --color-error: var(--color-rojo);

    /* Estados (docs/marca.md). Contraste texto/fondo de 6,5:1 o más. */
    --color-success: #24532c;
    --color-success-bg: #e6efe2;
    --color-warning: var(--color-hass);
    --color-warning-bg: #ece2c0;
    --color-error-bg: #fbeeee;
    /* Trazo bajo los títulos (sobre crema va musgo; la lima solo sobre Hass). */
    --color-accent-line: var(--color-musgo);
    /* Isotipo de fondo, muy tenue, al pie de la pantalla. */
    --watermark-opacity: 0.05;
    /* Marca sobria: sin sombras (se separa con filetes de 1 px arena). */
    --shadow-card: none;
    --shadow-popover: 0 0 0 1px var(--color-arena);

    /* Tipografía (Google Fonts, licencia OFL, con alternativa del sistema) */
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-text: var(--font-ui);
    --font-accent: var(--font-ui);
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 700;
    --label-tracking: 0.24em;
    --logo-tracking: 0.01em;

    /* Medidas (múltiplos de 8; esquinas casi rectas) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --radius: 2px;
    --font-size-base: 1rem;
    --font-size-small: 0.875rem;
    --font-size-title: 2.25rem;
}