/*
 * CD Mafra SAD — Design tokens (fonte única de verdade)
 * Camada: @layer tokens. Nenhum hex, px mágico ou família de fonte fora deste ficheiro.
 * Documentação: docs/02-design-system.md
 */
@layer tokens {
	:root {
		/* ---- Cor da marca: verde e amarelo medidos no emblema (Logo/escudo.png) ---- */
		--cdm-green-50:  #F0F8F3;
		--cdm-green-100: #DFF3E6;
		--cdm-green-200: #B9E4C8;
		--cdm-green-300: #7FCB9C;
		--cdm-green-400: #2EAE63;
		--cdm-green-500: #009848; /* emblema */
		--cdm-green-600: #0B8440;
		--cdm-green-700: #0E6A35;
		--cdm-green-800: #15402A;
		--cdm-green-900: #0F2A1D; /* fundos escuros; substitui o #10261b do site antigo */

		--cdm-yellow-50:  #FFFDE6;
		--cdm-yellow-100: #FFF8C2;
		--cdm-yellow-300: #FFEF66;
		--cdm-yellow-500: #F8E000; /* emblema */
		--cdm-yellow-600: #E6CF00; /* hover */
		--cdm-yellow-700: #C9B400; /* ativo / contorno */

		/* ---- Neutros ---- */
		--cdm-white:   #FFFFFF;
		--cdm-surface: #F6F8F7;
		--cdm-line:    #E3E8E5;
		--cdm-line-strong: #C9D2CD;
		--cdm-muted:   #5B6B62;
		--cdm-text:    #1F2A24;
		--cdm-ink:     #121417;
		--cdm-black:   #000000;

		/* ---- Semânticos ---- */
		--cdm-success: #1E8E3E;
		--cdm-warning: #B26A00;
		--cdm-danger:  #C62828;
		--cdm-info:    #0B5FA5;
		--cdm-success-bg: #E6F4EA;
		--cdm-warning-bg: #FFF3E0;
		--cdm-danger-bg:  #FDECEA;
		--cdm-info-bg:    #E8F1FB;

		/* ---- Papéis (o que os componentes usam; nunca as escalas diretamente) ---- */
		--cdm-bg:          var(--cdm-white);
		--cdm-bg-alt:      var(--cdm-surface);
		--cdm-fg:          var(--cdm-text);
		--cdm-fg-muted:    var(--cdm-muted);
		--cdm-heading:     var(--cdm-green-900);
		--cdm-primary:     var(--cdm-green-500);
		--cdm-primary-hover: var(--cdm-green-600);
		--cdm-on-primary:  var(--cdm-white);
		--cdm-accent:      var(--cdm-yellow-500);
		--cdm-accent-hover: var(--cdm-yellow-600);
		--cdm-on-accent:   var(--cdm-green-900);
		--cdm-link:        var(--cdm-green-700);
		--cdm-link-hover:  var(--cdm-green-500);
		--cdm-border:      var(--cdm-line);
		--cdm-focus:       var(--cdm-yellow-500);
		--cdm-focus-ring:  0 0 0 3px var(--cdm-green-900), 0 0 0 6px var(--cdm-focus);
		/* Preenchimento sólido com texto pequeno (btn--secondary, badges): AA em qualquer secção. */
		--cdm-solid:       var(--cdm-green-700);
		--cdm-solid-hover: var(--cdm-green-800);
		--cdm-on-solid:    var(--cdm-white);
		/* Contorno de campos (≥ 3:1, WCAG 1.4.11), erro de formulário, texto sobre fundos de estado. */
		--cdm-control-border: var(--cdm-muted);
		--cdm-error:       var(--cdm-danger);
		--cdm-on-status:   var(--cdm-text);
		/* Destaque de linha (CD Mafra na classificação) e elevação (fundos escuros não usam sombra). */
		--cdm-highlight:   var(--cdm-yellow-100);
		--cdm-elevation:   var(--cdm-shadow-sm);
		--cdm-elevation-hover: var(--cdm-shadow);

		/* ---- Tipografia ---- */
		/* As faces "… Fallback" (base.css) ajustam Arial/Arial Narrow às métricas da fonte web: swap sem CLS. */
		--cdm-font-display: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Impact, sans-serif;
		--cdm-font-body:    "Montserrat", "Montserrat Fallback", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		--cdm-font-mono:    ui-monospace, "Cascadia Mono", Consolas, monospace;

		--cdm-fw-regular: 400;
		--cdm-fw-medium:  500;
		--cdm-fw-bold:    700;
		--cdm-fw-display: 700;
		--cdm-fw-display-heavy: 800;

		--cdm-lh-tight:  1.1;  /* display */
		--cdm-lh-snug:   1.25; /* títulos pequenos */
		--cdm-lh-base:   1.6;  /* corpo */

		--cdm-ls-display: 0.01em;
		--cdm-ls-caps:    0.08em; /* eyebrows, badges, menu */

		/* Escala fluida (mobile → desktop) */
		--cdm-fs-xs:   0.75rem;
		--cdm-fs-sm:   0.875rem;
		--cdm-fs-base: 1rem;
		--cdm-fs-md:   1.125rem;
		--cdm-fs-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
		--cdm-fs-xl:   clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
		--cdm-fs-2xl:  clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
		--cdm-fs-3xl:  clamp(2rem, 1.5rem + 2.5vw, 3rem);
		--cdm-fs-4xl:  clamp(2.5rem, 1.8rem + 3.5vw, 4rem);
		--cdm-fs-display: clamp(2.75rem, 2rem + 5vw, 6rem);

		/* ---- Espaço (base 4 px) ---- */
		--cdm-sp-1:  0.25rem;
		--cdm-sp-2:  0.5rem;
		--cdm-sp-3:  0.75rem;
		--cdm-sp-4:  1rem;
		--cdm-sp-5:  1.25rem;
		--cdm-sp-6:  1.5rem;
		--cdm-sp-8:  2rem;
		--cdm-sp-10: 2.5rem;
		--cdm-sp-12: 3rem;
		--cdm-sp-16: 4rem;
		--cdm-sp-20: 5rem;
		--cdm-sp-24: 6rem;
		--cdm-section-y:    clamp(3rem, 6vw, 6rem);
		--cdm-section-y-sm: clamp(2rem, 4vw, 3.5rem);
		--cdm-stack:        var(--cdm-sp-4); /* espaço vertical por defeito entre blocos de texto */

		/* ---- Grelha e contentores ---- */
		--cdm-container:        80rem; /* 1280 px */
		--cdm-container-narrow: 48rem; /* 768 px, texto corrido */
		--cdm-container-wide:   90rem; /* 1440 px, heros e grelhas largas */
		--cdm-gutter:           clamp(1rem, 4vw, 2rem);
		--cdm-grid-cols:        12;
		--cdm-grid-gap:         clamp(1rem, 2vw, 1.5rem);
		/* Breakpoints (só documentação: media queries não aceitam var()) — sm 640 / md 768 / lg 1024 / xl 1280 */

		/* ---- Forma ---- */
		--cdm-radius-sm:   4px;
		--cdm-radius:      8px;
		--cdm-radius-lg:   16px;
		--cdm-radius-pill: 999px;
		--cdm-border-w:    1px;
		--cdm-border-w-strong: 2px;

		--cdm-shadow-sm: 0 1px 2px rgba(15, 42, 29, 0.08);
		--cdm-shadow:    0 4px 12px rgba(15, 42, 29, 0.10);
		--cdm-shadow-lg: 0 16px 40px rgba(15, 42, 29, 0.16);

		/* Véus sobre fotografia (green-900 translúcido): heros e página de entrada. */
		--cdm-overlay:        rgba(15, 42, 29, 0.72);
		--cdm-overlay-strong: rgba(15, 42, 29, 0.88);

		/* ---- Rácios de imagem ---- */
		--cdm-ratio-wide:   16 / 9;
		--cdm-ratio-card:   3 / 2;
		--cdm-ratio-player: 3 / 4;
		--cdm-ratio-square: 1 / 1;

		/* ---- Movimento ---- */
		--cdm-dur-fast: 150ms;
		--cdm-dur:      250ms;
		--cdm-dur-slow: 400ms;
		--cdm-ease:     cubic-bezier(0.2, 0, 0, 1);
		--cdm-ease-out: cubic-bezier(0, 0, 0.2, 1);

		/* ---- Camadas ---- */
		--cdm-z-header: 100;
		--cdm-z-drawer: 200;
		--cdm-z-modal:  300;
		--cdm-z-toast:  400;

		/* ---- Medidas de layout partilhadas ---- */
		--cdm-header-h:        4.5rem;  /* 72 px mobile */
		--cdm-header-h-lg:     5.5rem;  /* 88 px ≥ lg */
		--cdm-logo-h:          3rem;
		--cdm-touch-target:    2.75rem; /* 44 px */
		--cdm-content-measure: 65ch;

		/* ---- Medidas de componentes (components.css só usa estas, nunca px soltos) ---- */
		--cdm-hero-min-home:    min(calc(100svh - var(--cdm-header-h)), 52rem);
		--cdm-hero-min-page:    clamp(16rem, 42vh, 28rem);
		--cdm-hero-min-compact: clamp(10rem, 24vh, 14rem);
		--cdm-hero-min-full:    100svh;  /* ecrã inteiro (página brevemente, sem header) */
		--cdm-emblem-lg:        clamp(5rem, 4rem + 4vw, 8rem);
		--cdm-match-logo:       clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
		--cdm-match-logo-sm:    2rem;
		--cdm-sponsor-h:        3.5rem;
		--cdm-sponsor-h-main:   6rem;
		--cdm-avatar:           6rem;
		--cdm-dropdown-w:       16rem;
		--cdm-timeline-dot:     0.875rem;
		--cdm-video-play:       4.5rem;
		--cdm-dialog-w:         40rem;
		--cdm-accent-bar:       0.25rem; /* barra lateral de destaque (alertas, linha própria) */

		color-scheme: light;
	}

	/* Secção escura: redefine só os papéis. Os componentes não sabem que estão em fundo escuro. */
	.cdm-section--dark,
	.cdm-dark {
		--cdm-bg:        var(--cdm-green-900);
		--cdm-bg-alt:    var(--cdm-green-800);
		--cdm-fg:        var(--cdm-white);
		--cdm-fg-muted:  var(--cdm-green-200);
		--cdm-heading:   var(--cdm-white);
		--cdm-primary:   var(--cdm-yellow-500);
		--cdm-primary-hover: var(--cdm-yellow-600);
		--cdm-on-primary: var(--cdm-green-900);
		--cdm-accent:    var(--cdm-yellow-500);
		--cdm-on-accent: var(--cdm-green-900);
		--cdm-link:      var(--cdm-yellow-300);
		--cdm-link-hover: var(--cdm-yellow-500);
		--cdm-border:    rgba(255, 255, 255, 0.16);
		--cdm-focus-ring: 0 0 0 3px var(--cdm-green-900), 0 0 0 6px var(--cdm-yellow-500);
		--cdm-solid:       var(--cdm-white);
		--cdm-solid-hover: var(--cdm-green-100);
		--cdm-on-solid:    var(--cdm-green-900);
		--cdm-control-border: var(--cdm-green-200);
		--cdm-error:       var(--cdm-danger-bg);
		--cdm-highlight:   var(--cdm-green-800);
		--cdm-elevation:   none;
		--cdm-elevation-hover: none;
		color-scheme: dark;
	}

	/* Secção verde (marca): texto branco sobre verde do emblema. */
	.cdm-section--brand {
		--cdm-bg:        var(--cdm-green-500);
		--cdm-bg-alt:    var(--cdm-green-600);
		--cdm-fg:        var(--cdm-white);
		--cdm-fg-muted:  var(--cdm-green-100);
		--cdm-heading:   var(--cdm-white);
		--cdm-primary:   var(--cdm-yellow-500);
		--cdm-primary-hover: var(--cdm-yellow-600);
		--cdm-on-primary: var(--cdm-green-900);
		--cdm-link:      var(--cdm-yellow-300);
		--cdm-link-hover: var(--cdm-white);
		--cdm-border:    rgba(255, 255, 255, 0.24);
		--cdm-solid:       var(--cdm-green-900);
		--cdm-solid-hover: var(--cdm-green-800);
		--cdm-on-solid:    var(--cdm-white);
		--cdm-control-border: var(--cdm-white);
		--cdm-error:       var(--cdm-white); /* nenhum vermelho tem 4.5:1 sobre o verde: formulários não vão em secções brand */
		--cdm-highlight:   var(--cdm-green-600);
		--cdm-elevation:   none;
		--cdm-elevation-hover: none;
	}

	/* Secção amarela: usar com moderação (destaques, CTA de bilhetes). */
	.cdm-section--accent {
		--cdm-bg:        var(--cdm-yellow-500);
		--cdm-bg-alt:    var(--cdm-yellow-300);
		--cdm-fg:        var(--cdm-green-900);
		--cdm-fg-muted:  var(--cdm-green-800);
		--cdm-heading:   var(--cdm-green-900);
		--cdm-primary:   var(--cdm-green-900);
		--cdm-primary-hover: var(--cdm-green-800);
		--cdm-on-primary: var(--cdm-white);
		--cdm-link:      var(--cdm-green-900);
		--cdm-link-hover: var(--cdm-green-700);
		--cdm-border:    rgba(15, 42, 29, 0.2);
		--cdm-solid:       var(--cdm-green-900);
		--cdm-solid-hover: var(--cdm-green-800);
		--cdm-on-solid:    var(--cdm-white);
		--cdm-control-border: var(--cdm-green-900);
		--cdm-error:       var(--cdm-green-900);
		--cdm-highlight:   var(--cdm-yellow-300);
	}

	@media (prefers-reduced-motion: reduce) {
		:root {
			--cdm-dur-fast: 0ms;
			--cdm-dur: 0ms;
			--cdm-dur-slow: 0ms;
		}
	}
}