/*
 * Corego: roles por tema y derivados de contraste (fase 49, ADR-0088 §1, §2, §8 y §10).
 *
 * Completa `tokens.css` (el paquete original Corego-brand-v1, que no se edita): acá van
 *   1. los alias del contrato (`--brand-*`) sobre los primitivos del paquete (`--cg-*`);
 *   2. los derivados que el paquete no trae (propuestos por el repo para llegar a AA, §8);
 *   3. los roles (`--role-*`) de cada tema: `corego-dark` (default) y `corego-light`.
 *
 * Los únicos valores de color literales del repo están en este archivo y en `tokens.css`.
 * Las vistas nunca usan estas variables directo: usan las clases de rol de `assets/css/app.css`
 * (`bg-surface`, `text-muted`, `border-line`…) y los componentes. Ver `brand.md`.
 */

:root {
  /* 1. Alias del contrato sobre el paquete. */
  --brand-ink: var(--cg-ink);
  --brand-deep: var(--cg-deep);
  --brand-slate: var(--cg-slate);
  --brand-line: var(--cg-line);
  --brand-mist: var(--cg-mist);
  --brand-cloud: var(--cg-cloud);
  --brand-muted: var(--cg-muted);
  --brand-indigo: var(--cg-indigo);
  --brand-lavender: var(--cg-lavender);
  --brand-ember: var(--cg-ember);
  --brand-mint: var(--cg-mint);
  --brand-amber: var(--cg-amber);
  --brand-rose: var(--cg-rose);

  --brand-font-display: var(--cg-font-display);
  --brand-font-sans: var(--cg-font-ui);
  --brand-font-mono: var(--cg-font-mono);

  --brand-radius-field: var(--cg-radius-sm);
  --brand-radius-box: var(--cg-radius);
  --brand-radius-lg: var(--cg-radius-lg);
  --brand-radius-pill: 9999px;

  /* 2. Derivados (no están en el paquete; propuestos por el repo, ADR-0088 §8). */
  --brand-white: #FFFFFF;
  /* Del bloque claro del paquete (`[data-theme="light"]` de tokens.css). */
  --brand-border-light: #DDE1EE;
  --brand-muted-light: #5B6178;
  --brand-indigo-strong: #4448D6;
  /* Texto de estado sobre fondo claro (el color del sheet queda para puntos, barras y fondos tenues). */
  --brand-mint-strong: #1B7E5A;
  --brand-amber-strong: #926706;
  --brand-rose-strong: #DC0D30;
  --brand-ember-strong: #D13000;
  /* Borde de campos (>= 3:1 contra la superficie). */
  --brand-field-dark: #646C8A;
  --brand-field-light: #7A819B;

  --brand-tracking-display: -0.02em;
  --brand-shadow-sm: 0 1px 2px 0 color-mix(in oklab, var(--cg-ink) 18%, transparent);
  --brand-shadow-md: 0 8px 24px -8px color-mix(in oklab, var(--cg-ink) 40%, transparent);
  --brand-space-1: 0.25rem;
  --brand-space-2: 0.5rem;
  --brand-space-3: 0.75rem;
  --brand-space-4: 1rem;
  --brand-space-6: 1.5rem;
  --brand-motion-fast: 120ms;
  --brand-motion-base: 200ms;
  --brand-motion-loader: 1800ms;
}

/* 3. Roles: tema oscuro (default, también sin `data-theme`). */
:root,
[data-theme=corego-dark] {
  color-scheme: dark;
  --role-bg: var(--brand-ink);
  --role-surface: var(--brand-deep);
  --role-surface-sunken: var(--brand-ink);
  --role-border: var(--brand-slate);
  --role-field-border: var(--brand-field-dark);
  --role-text: var(--brand-cloud);
  --role-text-muted: var(--brand-muted);
  --role-primary: var(--brand-indigo);
  --role-on-primary: var(--brand-white);
  --role-link: var(--brand-lavender);
  --role-focus: var(--brand-lavender);
  --role-accent: var(--brand-ember);
  --role-on-accent: var(--brand-ink);
  --role-ok: var(--brand-mint);
  --role-pending: var(--brand-amber);
  --role-failed: var(--brand-rose);
  --role-info: var(--brand-lavender);
  --role-neutral: var(--brand-slate);
  --role-on-status: var(--brand-ink);
  --role-on-info: var(--brand-ink);
  --role-ok-text: var(--brand-mint);
  --role-pending-text: var(--brand-amber);
  --role-failed-text: var(--brand-rose);
  --role-info-text: var(--brand-lavender);
  --role-logo: var(--brand-white);
  --role-logo-core: var(--brand-ember);
  --role-code-keyword: var(--brand-lavender);
  --role-code-string: var(--brand-mint);
  --role-code-number: var(--brand-ember);
  --role-qr-bg: var(--brand-white);
  /* Qué versión del logo se ve (CoregoWeb.Brand renderiza las dos). */
  --role-brand-on-dark: block;
  --role-brand-on-light: none;
}

/* Tema claro. */
[data-theme=corego-light] {
  color-scheme: light;
  --role-bg: var(--brand-mist);
  --role-surface: var(--brand-white);
  --role-surface-sunken: var(--brand-mist);
  --role-border: var(--brand-border-light);
  --role-field-border: var(--brand-field-light);
  --role-text: var(--brand-ink);
  --role-text-muted: var(--brand-muted-light);
  --role-primary: var(--brand-indigo);
  --role-on-primary: var(--brand-white);
  --role-link: var(--brand-indigo-strong);
  --role-focus: var(--brand-indigo-strong);
  --role-accent: var(--brand-ember);
  --role-on-accent: var(--brand-ink);
  --role-ok: var(--brand-mint);
  --role-pending: var(--brand-amber);
  --role-failed: var(--brand-rose);
  --role-info: var(--brand-indigo);
  --role-neutral: var(--brand-border-light);
  --role-on-status: var(--brand-ink);
  --role-on-info: var(--brand-white);
  --role-ok-text: var(--brand-mint-strong);
  --role-pending-text: var(--brand-amber-strong);
  --role-failed-text: var(--brand-rose-strong);
  --role-info-text: var(--brand-indigo-strong);
  --role-logo: var(--brand-indigo);
  --role-logo-core: var(--brand-ember);
  --role-code-keyword: var(--brand-indigo-strong);
  --role-code-string: var(--brand-mint-strong);
  --role-code-number: var(--brand-ember-strong);
  --role-qr-bg: var(--brand-white);
  --role-brand-on-dark: none;
  --role-brand-on-light: block;
}

/* Sin JS (o en una página que no lo carga): claro solo si el sistema lo pide. Igual al bloque
   anterior (lo verifica test/brand/contrast_test.exs). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --role-bg: var(--brand-mist);
    --role-surface: var(--brand-white);
    --role-surface-sunken: var(--brand-mist);
    --role-border: var(--brand-border-light);
    --role-field-border: var(--brand-field-light);
    --role-text: var(--brand-ink);
    --role-text-muted: var(--brand-muted-light);
    --role-primary: var(--brand-indigo);
    --role-on-primary: var(--brand-white);
    --role-link: var(--brand-indigo-strong);
    --role-focus: var(--brand-indigo-strong);
    --role-accent: var(--brand-ember);
    --role-on-accent: var(--brand-ink);
    --role-ok: var(--brand-mint);
    --role-pending: var(--brand-amber);
    --role-failed: var(--brand-rose);
    --role-info: var(--brand-indigo);
    --role-neutral: var(--brand-border-light);
    --role-on-status: var(--brand-ink);
    --role-on-info: var(--brand-white);
    --role-ok-text: var(--brand-mint-strong);
    --role-pending-text: var(--brand-amber-strong);
    --role-failed-text: var(--brand-rose-strong);
    --role-info-text: var(--brand-indigo-strong);
    --role-logo: var(--brand-indigo);
    --role-logo-core: var(--brand-ember);
    --role-code-keyword: var(--brand-indigo-strong);
    --role-code-string: var(--brand-mint-strong);
    --role-code-number: var(--brand-ember-strong);
    --role-qr-bg: var(--brand-white);
    --role-brand-on-dark: none;
    --role-brand-on-light: block;
  }
}