/*
 * Info Catholic design tokens — first pass, built from the values found in
 * the live Elementor Kit (Fase 0 audit, docs/mapa-de-migracao.md §8):
 * Primary #004E64, Secondary #006C88, Accent #C52184, Text #1C1C1C,
 * Background #EBE7E4. There is no formal design system document (unlike
 * CatolicoApp's "Terra" palette) — the tonal scale below is derived from
 * those five confirmed values, not handed down from a design artifact.
 * Treat as a draft: revisit once more templates exist to see it in context.
 */

:root {
	/* Primary — teal, derived from #004E64 */
	--ic-primary-50:  #EAF4F6;
	--ic-primary-100: #C7DEE4;
	--ic-primary-200: #8FBAC7;
	--ic-primary-300: #4A8DA0;
	--ic-primary-400: #1D6C82;
	--ic-primary-500: #004E64; /* confirmed */
	--ic-primary-600: #003C4D;
	--ic-primary-700: #002C39;
	--ic-primary-800: #001F28;
	--ic-primary-900: #00141A;

	/* Secondary — teal, confirmed */
	--ic-secondary-500: #006C88;
	--ic-secondary-600: #00546A;

	/* Accent — magenta/pink, derived from #C52184 */
	--ic-accent-400: #D454A0;
	--ic-accent-500: #C52184; /* confirmed */
	--ic-accent-600: #9E1A69;

	/* Neutrals */
	--ic-neutral-0: #FFFFFF;
	--ic-neutral-50: #F7F5F4;
	--ic-neutral-100: #EBE7E4; /* confirmed light background */
	--ic-neutral-200: #D8D2CD;
	--ic-neutral-300: #B8AFA7;
	--ic-neutral-500: #6B6560;
	--ic-neutral-700: #3A3633;
	--ic-neutral-900: #1C1C1C; /* confirmed text */

	/*
	 * Liturgical colors — universal Roman Rite convention (green/purple/
	 * red/gold/rose), not a brand element. Reusing the same semantic
	 * values as CatolicoApp is intentional: the calendar color meaning is
	 * shared across both sites, only the site's own brand palette differs.
	 */
	--lit-ordinary-time: #3E7C52;
	--lit-advent-lent: #6C4E8E;
	--lit-martyrs: #A63A3A;
	--lit-major-feast: #B8912F;
	--lit-gaudete-laetare: #C77D90;

	/* UI semantics */
	--ui-success: #2F7D4F;
	--ui-warning: #A87B1E;
	--ui-error: #B23A2E;

	/* Roles (the theme consumes these, never the raw scale tokens directly) */
	--bg: var(--ic-neutral-100);
	--surface: var(--ic-neutral-0);
	--surface-2: var(--ic-primary-50);
	--border: var(--ic-neutral-200);
	--border-strong: var(--ic-neutral-300);
	--text: var(--ic-neutral-900);
	--text-2: var(--ic-neutral-700);
	--text-soft: var(--ic-neutral-500);
	--accent: var(--ic-primary-500);
	--accent-text: var(--ic-primary-600);
	--accent-strong: var(--ic-primary-700);
	--link: var(--ic-primary-500);
	--accent-over: #FFFFFF; /* readable ink over a solid accent surface (primary button, active A-Z letter) */
	--accent-filled: var(--ic-accent-500); /* solid accent-2 background with white text (secondary CTA) */
	--shadow: 0 1px 2px rgba(0, 20, 26, .06), 0 4px 16px rgba(0, 20, 26, .08);

	/* Typography — confirmed Kit fonts. Helvetica is proprietary (no
	 * self-hosted webfont license); relies on the OS-provided font via a
	 * system stack. Inter is open source (SIL license) and self-hosted
	 * in assets/fonts/. */
	--f-display: Helvetica, "Helvetica Neue", Arial, sans-serif;
	--f-ui: Inter, "Segoe UI", system-ui, sans-serif;
	--f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* Type scale */
	--fs-caption: 0.8125rem;
	--fs-body: 1rem;
	--fs-lead: 1.1875rem;
	--fs-h3: 1.125rem; /* Kit: 18px */
	--fs-h2: 1.375rem; /* Kit: 22px */
	--fs-h1: 2.5rem;
	--fs-display: clamp(2.5rem, 6vw, 3.5rem);

	/* Spacing — base 4px */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-12: 48px;
	--sp-16: 64px;
	--sp-24: 96px;

	/* Widths and radii */
	--content-size: 680px;
	--wide-size: 1080px;
	--radius-s: 4px;
	--radius-m: 10px;
	--radius-pill: 999px;

	/* Breakpoints (documentation only — CSS can't read var() in @media) */
	--bp-sm: 600px;
	--bp-md: 860px;
	--bp-lg: 1080px;

	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #14181A;
		--surface: #1C2124;
		--surface-2: #22282B;
		--border: #33393C;
		--border-strong: #454C4F;
		--text: #EDEDEC;
		--text-2: #C2C6C7;
		--text-soft: #8D9294;
		--accent: #4A8DA0;
		--accent-text: #8FBAC7;
		--accent-strong: #C7DEE4;
		--accent-over: #00141A;
		--link: #8FBAC7;
		--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .35);
		--lit-ordinary-time: #6FAE83;
		--lit-advent-lent: #A288C4;
		--lit-martyrs: #D07A72;
		--lit-major-feast: #D4B054;
		--lit-gaudete-laetare: #DA9EAE;
		--ui-success: #6FAE83;
		--ui-warning: #D4A94E;
		--ui-error: #DB8074;
	}
}

:root[data-theme="dark"] {
	--bg: #14181A;
	--surface: #1C2124;
	--surface-2: #22282B;
	--border: #33393C;
	--border-strong: #454C4F;
	--text: #EDEDEC;
	--text-2: #C2C6C7;
	--text-soft: #8D9294;
	--accent: #4A8DA0;
	--accent-text: #8FBAC7;
	--accent-strong: #C7DEE4;
	--accent-over: #00141A;
	--link: #8FBAC7;
	--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .35);
	--lit-ordinary-time: #6FAE83;
	--lit-advent-lent: #A288C4;
	--lit-martyrs: #D07A72;
	--lit-major-feast: #D4B054;
	--lit-gaudete-laetare: #DA9EAE;
	--ui-success: #6FAE83;
	--ui-warning: #D4A94E;
	--ui-error: #DB8074;
}