/*
  Design tokens — fonte única: `wiki/DESIGN.md` (F3.I1.T4).

  Regras (ADR-010/ADR-016):
  - **Cor em `oklch()`** por padrão (espaço perceptualmente uniforme; P3).
  - **Unidades modernas**: `rem`, `%`, `fr`, `dvh`, `clamp()` — `px` é a **última** opção (ideal: zero).
  - Ordem determinística de camadas: a acessibilidade vem por último (`a11y`), sem `!important`.
*/
@layer theme, base, components, utilities, overrides, a11y;

/* ── @property: custom properties tipadas (herdam; initial-value determinístico) ── */
@property --tenant-primary {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(48.8% 0.243 264.376);
}
@property --tenant-accent {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(82.8% 0.189 84.429);
}
@property --tenant-link {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(54.6% 0.245 262.881);
}
@property --tenant-radius {
  syntax: '<length>';
  inherits: true;
  initial-value: 0.375rem;
}
@property --font-content {
  syntax: '*';
  inherits: true;
  initial-value: system-ui;
}

@layer theme {
  :root {
    /* ── Tipografia de conteúdo (ADR-011) — ajustável pelo usuário/CMS. ── */
    --font-content: 'Atkinson Hyperlegible Next', 'Atkinson Fallback', system-ui, sans-serif;

    /* ── Marca (camada `default`; o CMS sobrepõe via `/theme.css` — ADR-016). ── */
    --tenant-primary: oklch(48.8% 0.243 264.376);
    --tenant-accent: oklch(82.8% 0.189 84.429);
    --tenant-link: oklch(54.6% 0.245 262.881);
    --tenant-radius: 0.375rem;

    /* ── Superfícies e texto (sobrescrevíveis pelo tema/a11y — ADR-016). ── */
    --surface: oklch(100% 0 0);
    --surface-muted: oklch(98.5% 0.002 247.839);
    --ink: oklch(21% 0.034 264.665);
    --ink-muted: oklch(55.1% 0.027 264.364);
    --line: oklch(92.8% 0.006 264.531);

    /* ── Espaço/tipografia fluidos: min/max **sempre em rem** (WCAG 1.4.4). ── */
    --space-container: clamp(1rem, 5vw, 2rem);
    --space-section: clamp(2rem, 8vh, 4rem);
    --space-gutter: clamp(1rem, 3vw, 1.5rem);
    --shell-max: 80rem;

    /* Escala tipográfica fluida de conteúdo (DESIGN.md §3) — consumida por `typography.css`. */
    --text-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-h1: clamp(1.75rem, 3vw, 2.25rem);
    --text-h2: clamp(1.375rem, 2.5vw, 1.875rem);

    /* ── Civic Precision (paleta do tenant). ── */
    --civic-ink: oklch(11.46% 0.0347 252.37);
    --civic-navy: oklch(23.62% 0.0742 253.6);
    --civic-navy-soft: oklch(61.96% 0.0656 259.98);
    --civic-yellow: oklch(91.18% 0.1228 94.5);
    --civic-yellow-strong: oklch(87.8% 0.1803 95.14);
    --civic-on-yellow: oklch(50.35% 0.1011 95.47);
    /* Texto sobre fundo escuro fixo: o fundo não acompanha o tema, o par também não (WCAG AA). */
    --civic-on-ink: oklch(97% 0.002 247.84);
    --civic-on-navy: oklch(97% 0.002 247.84);
    --civic-on-navy-soft: oklch(15% 0.03 253.6);
    --civic-surface: oklch(98.16% 0.0017 247.84);
    --civic-surface-low: oklch(96.67% 0.0017 247.84);
    --civic-surface-dim: oklch(94.86% 0.0017 247.84);
    --civic-surface-high: oklch(93.05% 0.0017 247.84);
    --civic-surface-highest: oklch(91.46% 0.0026 228.79);
    --civic-border: oklch(82.75% 0.0157 273.81);
    --civic-outline: oklch(
      55% 0.0128 269.45
    ); /* texto secundário — contraste 4.86:1 sobre branco (WCAG AA) */
    --civic-link: oklch(40.01% 0.1315 254.94);
    --civic-error: oklch(50.6% 0.1927 27.7);

    /* ── z-index por allowlist (unitless — evita "guerra de camadas"). ── */
    --z-base: 0;
    --z-sticky: 10;
    --z-dropdown: 20;
    --z-overlay: 30;
    --z-toast: 40;

    /* ── Estados semânticos (imutáveis — consistência UX/e-MAG). ──
         Nome com prefixo `status-` para não colidir com as variáveis do daisyUI.
         `danger` é **escuro** o bastante para texto sobre superfície clara (≥ 4.5:1, WCAG 1.4.3)
         — o mesmo token pinta o texto de erro do formulário e o fundo do alerta (ADR-025). */
    --status-success: oklch(69.6% 0.149 162.48);
    --status-warning: oklch(76.9% 0.165 70.08);
    --status-danger: oklch(50.6% 0.1927 27.7);
    --status-info: oklch(62.3% 0.188 259.81);
  }

  /*
    Ponte de tema do daisyUI 5 (ADR-009/ADR-016): componentes daisyUI (CMS e, onde viável, portal)
    herdam os **nossos** tokens — inclusive o espaço de cor oklch e o raio do tenant.
    Declarada depois do `@plugin "daisyui"`, em `:root` e no tema nomeado `concordia`.
  */
  :root,
  [data-theme='concordia'] {
    /* `themes: false` no daisyUI: o esquema de cores é nosso. */
    color-scheme: light;

    --color-base-100: var(--surface);
    --color-base-200: var(--surface-muted);
    --color-base-300: var(--line);
    --color-base-content: var(--ink);

    /* Identidade do CMS (`--cms-*`, ADR-036) sobrepõe a do tenant **só** onde a folha do CMS é
       carregada; sem override, `--cms-primary` não existe e a herança acontece (o `var()`
       precisa continuar *unregistered* para o fallback valer — não registrar em `@property`). */
    --color-primary: var(--cms-primary, var(--tenant-primary));
    --color-primary-content: oklch(100% 0 0);
    --color-secondary: var(--civic-navy);
    --color-secondary-content: oklch(100% 0 0);
    --color-accent: var(--cms-accent, var(--tenant-accent));
    --color-accent-content: var(--ink);
    --color-neutral: var(--ink);
    --color-neutral-content: oklch(100% 0 0);

    --color-info: var(--status-info);
    --color-info-content: oklch(100% 0 0);
    --color-success: var(--status-success);
    --color-success-content: oklch(21% 0.034 264.665);
    --color-warning: var(--status-warning);
    --color-warning-content: oklch(21% 0.034 264.665);
    --color-error: var(--status-danger);
    --color-error-content: oklch(100% 0 0);

    --radius-selector: var(--tenant-radius);
    --radius-field: var(--tenant-radius);
    --radius-box: var(--tenant-radius);

    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 0.0625rem; /* 1px em rem (unidade moderna; respeita o zoom do usuário) */
    --depth: 0;
    --noise: 0;
  }
}

/* ── Ponte para o Tailwind 4: gera utilitários (`text-civic-ink`, `bg-brand-primary`, …). ── */
@theme {
  --color-brand-primary: var(--tenant-primary);
  --color-brand-accent: var(--tenant-accent);
  --color-brand-link: var(--tenant-link);

  --color-surface: var(--surface);
  --color-surface-muted: var(--surface-muted);
  --color-ink: var(--ink);
  --color-ink-muted: var(--ink-muted);
  --color-line: var(--line);

  --radius-tenant: var(--tenant-radius);

  --spacing-container: var(--space-container);
  --spacing-section: var(--space-section);

  --color-civic-ink: var(--civic-ink);
  --color-civic-navy: var(--civic-navy);
  --color-civic-navy-soft: var(--civic-navy-soft);
  --color-civic-yellow: var(--civic-yellow);
  --color-civic-yellow-strong: var(--civic-yellow-strong);
  --color-civic-on-yellow: var(--civic-on-yellow);
  --color-civic-on-ink: var(--civic-on-ink);
  --color-civic-on-navy: var(--civic-on-navy);
  --color-civic-on-navy-soft: var(--civic-on-navy-soft);
  --color-civic-surface: var(--civic-surface);
  --color-civic-surface-low: var(--civic-surface-low);
  --color-civic-surface-dim: var(--civic-surface-dim);
  --color-civic-surface-high: var(--civic-surface-high);
  --color-civic-surface-highest: var(--civic-surface-highest);
  --color-civic-border: var(--civic-border);
  --color-civic-outline: var(--civic-outline);
  --color-civic-link: var(--civic-link);
  --color-civic-error: var(--civic-error);
}