/**
 * tokens/variables.css — fonte única de tokens do tema (ex foundation/variables-core.css)
 *
 * Novo cliente: alterar só --brand … --neutral (8 cores) abaixo.
 * Semântica --color-*, botões, datepicker e aliases legados derivam daí.
 * Tipografia, espaçamento e raios também vivem aqui (não em layout/global.css).
 */

:root {
	/* ── 1. Paleta base (8 cores HEX) ── */
	--brand: #074f60;
	--brand-accent: #078c81;
	--brand-link: #149c9d;
	--brand-highlight: #1fc08c;
	--brand-soft: #7ff8cf;
	--text: #4d4d4d;
	--surface: #ffffff;
	--neutral: #f5f5f5;

	/* ── 2. Semântica (preferir em CSS novo) ── */
	--color-primary: var(--brand);
	--color-accent: var(--brand-accent);
	--color-link: var(--brand-link);
	--color-interactive: var(--brand-highlight);
	--color-action: var(--brand-soft);
	--color-text: var(--text);
	--color-surface: var(--surface);
	--color-muted: var(--neutral);

	/* Derivados */
	--color-text-inverse: var(--surface);
	--color-surface-brand: #d5f6ee;
	--color-surface-brand-weak: #eafaf6;
	--color-border: #29c0b2;
	--color-border-subtle: #f1f1f1;
	--color-brand-deep: #143d48;
	--color-brand-muted: #206375;

	--color-danger: #b42318;
	--color-warning: #fbff08;
	--color-surface-disabled: #e6e6e6;
	--color-text-disabled: #444444;
	--color-surface-hover: #eeeeee;

	--color-cta-surface: #109e97;
	--color-cta-time-pill-bg: var(--color-brand-deep);
	--color-cta-avatar-ring: #efba13;
	--color-skeleton-line: #e9edf0;

	--btn-action-bg: var(--color-action);
	--btn-action-color: var(--color-primary);
	--btn-action-border: var(--color-border);
	--btn-action-hover-bg: var(--color-primary);
	--btn-action-hover-color: var(--color-surface);
	--btn-action-focus-ring: color-mix(in srgb, var(--color-border) 45%, transparent);

	--btn-secondary-bg: var(--color-surface);
	--btn-secondary-color: var(--color-primary);
	--btn-secondary-border: var(--color-interactive);
	--btn-secondary-hover-bg: var(--color-surface-brand-weak);
	--btn-secondary-hover-border: var(--color-accent);
	--btn-secondary-focus-ring: color-mix(in srgb, var(--color-interactive) 28%, transparent);

	--btn-padding-block: 0.65rem;
	--btn-padding-inline: 1.5rem;
	/* Espaço entre botões em pares (horizontal tablet+; vertical no mobile em coluna) */
	--btn-actions-gap: 1.5rem; /* 24px com root 16px */

	/* Micro-interacção lift — .th-btn-lift (hover/focus replicável) */
	--th-lift-duration: 0.35s;
	--th-lift-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--th-lift-y: -2px;
	--th-lift-y-pill: -3px;
	--th-lift-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary-deep) 10%, transparent);
	--th-lift-shadow-hover: 0 10px 28px color-mix(in srgb, var(--color-primary-deep) 18%, transparent);
	--th-lift-shadow-active: 0 4px 12px color-mix(in srgb, var(--color-primary-deep) 12%, transparent);
	--th-lift-pill-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary-deep) 8%, transparent);
	--th-lift-pill-shadow-hover: 0 12px 26px color-mix(in srgb, var(--color-primary-deep) 14%, transparent);
	--th-lift-accent-hover-bg: color-mix(in srgb, var(--color-accent-warning-strong) 88%, var(--color-primary-deep));
	--th-lift-brand-hover-bg: color-mix(in srgb, var(--color-primary) 90%, var(--color-primary-deep));

	/* ── 3. Aliases legados ── */
	--color-primary-dark: var(--color-primary);
	--color-primary-accent: var(--color-accent);
	--color-primary-base: var(--color-link);
	--color-primary-light: var(--color-interactive);
	--primary-light-less: var(--color-action);
	--color-primary-deep: var(--color-brand-deep);
	--color-primary-muted: var(--color-brand-muted);
	--color-text-primary: var(--color-text);
	--color-surface-base: var(--color-surface);
	--color-surface-primary-subtle: var(--color-surface-brand);
	--color-surface-primary-subtle-weak: var(--color-surface-brand-weak);
	--color-surface-muted: var(--color-muted);
	--color-link-default: var(--color-link);
	--color-link-emphasis: var(--color-primary);
	--color-interactive-active: var(--color-interactive);
	--color-nav-link-on-dark: var(--color-text-inverse);
	--color-accent-warning-strong: var(--color-warning);
	--color-text-danger: var(--color-danger);
	--color-datepicker-accent-border: var(--color-border);

	--color-datepicker-surface: var(--color-surface);
	--color-datepicker-surface-tint: var(--color-surface-brand-weak);
	--color-datepicker-popover-bg: #fbfbfb;
	--color-datepicker-card-bg: var(--color-datepicker-popover-bg);
	--color-datepicker-weekday-text: color-mix(in srgb, var(--color-primary) 58%, var(--color-surface));
	--color-datepicker-day-muted-text: color-mix(in srgb, var(--color-text) 36%, var(--color-surface));
	--color-datepicker-day-disabled-text: #666666;
	--color-datepicker-border: color-mix(in srgb, var(--color-primary) 9%, var(--color-border-subtle));
	--color-datepicker-today-ring: color-mix(in srgb, var(--color-link) 55%, transparent);
	--color-datepicker-today-empty-bg: var(--color-surface-brand);
	--color-datepicker-today-empty-text: var(--color-primary);
	--color-datepicker-no-slots-bg: color-mix(in srgb, #a3a375 55%, var(--color-surface));
	--shadow-datepicker: 0 12px 40px color-mix(in srgb, var(--color-primary) 10%, transparent),
		0 2px 10px color-mix(in srgb, var(--color-text) 5%, transparent);
	--shadow-focus-ring-datepicker: 0 0 0 3px color-mix(in srgb, var(--color-link) 38%, transparent);

	--bs-navbar-toggler-border-color: var(--color-text-inverse);
	--bs-orange: #fd7e14;

	/* Breakpoints: css/tokens/breakpoints.css (--breakpoint-sm …) */

	/* ── 4. Espaçamento, raios, formulários ── */
	--radius-lg: 16px;
	--space-nav-inline-sm: 10px;
	--space-nav-inline-lg: 18px;
	--space-nav-item-inline: 20px;
	--th-nav-underline-height: 2px;
	--th-nav-underline-color: var(--color-primary-dark);
	--size-form-submit-max-width: 22rem;
	--size-form-submit-min-height: 3rem;
	--space-form-row-gap: 1.25rem;
	--size-button-min-width-horizontal-form: 11rem;
	/* Largura fixa do primário (quiz, agenda, contacto) — artigos mantêm --block */
	--size-button-primary-width: 11rem;
	/* Primário com texto longo (ex. «Repetir o teste» + ícone) — uma linha */
	--size-button-primary-width-wide: 11.25rem;
	--space-section-appointment-top: 2rem;
	--radius-control-sm: 6px;
	--space-datepicker-cell-gap: 4px;
	--radius-datepicker-shell: 14px;
	--radius-datepicker-inner: 12px;
	--size-datepicker-day-min-target: 2.75rem;

	/* ── 5. Tipografia (px inteiros) ── */
	--font-root-size-px: 16;
	--font-size-0: 0;
	--font-size-4: 4px;
	--font-size-6: 6px;
	--font-size-7: 7px;
	--font-size-8: 8px;
	--font-size-10: 10px;
	--font-size-12: 12px;
	--font-size-13: 13px;
	--font-size-14: 14px;
	--font-size-16: 16px;
	--font-size-18: 18px;
	--font-size-20: 20px;
	--font-size-22: 22px;
	--font-size-24: 24px;
	--font-size-28: 28px;
	--font-size-30: 30px;
	--font-size-32: 32px;
	--font-size-36: 36px;
	--font-size-64: 64px;
	--font-size-26: 26px;
	--font-size-34: 34px;
	--font-size-46: 46px;
	--font-size-48: 48px;
	--font-size-56: 56px;
	--font-size-58: 58px;
	--font-size-72: 72px;
	--font-size-87: 87px;
	--font-size-40: 40px;
	--font-size-51: 51px;

	/* em com equivalente visual em px inteiros */
	--type-em-12: calc(12 / var(--font-root-size-px) * 1em);
	--type-em-14: calc(14 / var(--font-root-size-px) * 1em);
	--type-em-16: calc(16 / var(--font-root-size-px) * 1em);
	--type-em-18: calc(18 / var(--font-root-size-px) * 1em);
	--type-em-20: calc(20 / var(--font-root-size-px) * 1em);
	--type-em-22: calc(22 / var(--font-root-size-px) * 1em);
	--type-em-24: calc(24 / var(--font-root-size-px) * 1em);
	--type-em-28: calc(28 / var(--font-root-size-px) * 1em);
	--type-em-30: calc(30 / var(--font-root-size-px) * 1em);
	--type-em-32: calc(32 / var(--font-root-size-px) * 1em);
	--type-em-36: calc(36 / var(--font-root-size-px) * 1em);
	--type-em-64: calc(64 / var(--font-root-size-px) * 1em);

	/* ── 6. Aliases legados (ex bootstrap5.3.3/scss/custom.css :root, linhas 8379+) ── */
	--active-menu: var(--color-interactive);
	--black: #1d2939;
	--nav-links: var(--color-nav-link-on-dark);
	--links: var(--color-link);
	--links-dark: var(--color-primary);
	--white: var(--color-surface);
	--primary-color-light: var(--color-primary-light);
	--primary-color-dark: var(--color-primary);
	--primary-color-medium: var(--color-link);
	--primary-color: var(--color-primary-muted);
	--gray: #e4e7ec;
	--bg-gray-light: #f2f4f7;
	--bg-gray-card: #f9fafb;
	--primary: var(--color-primary-muted);
	--primary-dark: var(--color-primary);
	--placeholder: #212529;
	--wp--preset--color--danger: #ff5754;
	--bs-border-color: #98a2b3;
	--bs-btn-color: #6c757d;
	--bs-heading-color: #1d2939;
	--bs-dropdown-link-hover-bg: var(--color-action);
	--bs-dropdown-link-active-bg: var(--color-action);
}