/*
Theme Name: ASLA
Theme URI: https://sorrisoleonor.pt
Author: Joel Romeira
Description: Tema clássico da ASLA — Associação Sorriso Leonor e Amigos. HTML/CSS fixo e fiel ao ASLA Design System (Claude Design); sem blocos nativos nem construtores de páginas. Bilingue PT/EN com fallback para PT.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: asla
Tags: custom-menu, custom-logo, featured-images, translation-ready

Este ficheiro contém o cabeçalho obrigatório do tema e os tokens do ASLA
Design System (tokens/colors.css, typography.css, spacing.css, base.css),
copiados 1:1 do Claude Design. Os estilos de layout e componentes vivem em
assets/css/asla.css e usam apenas estas custom properties.
*/

/* ==========================================================================
   Tokens — cores
   ========================================================================== */
:root {
	/* Magenta — cor de ação (logo magenta #D6336C, sofisticado para #C2185B) */
	--magenta-50: #FDF3F7;
	--magenta-100: #FCE4EC;
	--magenta-200: #F8CADB;
	--magenta-300: #EF9CB8;
	--magenta-400: #E0578A;
	--magenta-500: #D6336C;
	--magenta-600: #C2185B;
	--magenta-700: #9E124A;
	--magenta-800: #730D37;

	/* Plum — roxo profundo para títulos e superfícies escuras (logo roxo #3D2C6B) */
	--plum-50: #F6F3F9;
	--plum-100: #EDE6F4;
	--plum-200: #DCCFEA;
	--plum-300: #BFAED8;
	--plum-400: #9580BA;
	--plum-500: #6E5895;
	--plum-600: #562D6B;
	--plum-700: #3D2C6B;
	--plum-800: #2D1B4E;
	--plum-900: #1D1133;

	/* Lilac — apoio suave para o gradiente dos banners */
	--lilac-100: #EFE7F7;
	--lilac-200: #E3D6F1;
	--lilac-300: #CDB9E6;

	/* Neutros quentes */
	--white: #FFFFFF;
	--ivory: #FCF9F8;
	--sand-100: #F5EFED;
	--sand-200: #EAE2E1;
	--sand-300: #D8CDCE;
	--ink-400: #8C8196;
	--ink-500: #6B6078;
	--ink-700: #453A55;
	--ink-900: #2D1B4E;

	/* Semânticas */
	--success-600: #2E7D5B;
	--success-50: #E8F4EE;
	--warning-600: #A8620A;
	--warning-50: #FBF1E3;
	--error-600: #B3261E;
	--error-50: #FBE9E8;

	/* Aliases — texto */
	--text-heading: var(--plum-800);
	--text-body: var(--ink-700);
	--text-muted: var(--ink-500);
	--text-subtle: var(--ink-400);
	--text-accent: var(--magenta-600);
	--text-on-dark: #FFFFFF;
	--text-on-dark-muted: #CFC3E0;
	--text-on-accent: #FFFFFF;

	/* Aliases — superfícies */
	--surface-page: var(--white);
	--surface-card: var(--white);
	--surface-blush: var(--magenta-50);
	--surface-blush-strong: var(--magenta-100);
	--surface-warm: var(--ivory);
	--surface-dark: var(--plum-800);
	--surface-darker: var(--plum-900);
	--surface-lilac: var(--lilac-100);

	/* Aliases — ação */
	--action-primary: var(--magenta-600);
	--action-primary-hover: var(--magenta-700);
	--action-primary-press: var(--magenta-800);
	--action-focus-ring: rgba(194, 24, 91, .28);
	--link: var(--magenta-600);
	--link-hover: var(--magenta-700);

	/* Aliases — bordas */
	--border-subtle: var(--sand-200);
	--border-default: var(--sand-300);
	--border-strong: var(--plum-300);
	--border-on-dark: rgba(255, 255, 255, .14);

	/* Gradientes */
	--gradient-banner: linear-gradient(118deg, #FCE4EC 0%, #F4E2F1 45%, #E3D6F1 100%);
	--gradient-brand: linear-gradient(160deg, #B0316B 0%, #562D6B 100%);
	--gradient-photo-protect: linear-gradient(180deg, rgba(29, 17, 51, 0) 40%, rgba(29, 17, 51, .72) 100%);
}

/* ==========================================================================
   Tokens — tipografia
   Bricolage Grotesque (títulos) + Plus Jakarta Sans (texto), Google Fonts.
   ========================================================================== */
:root {
	--font-display: 'Bricolage Grotesque', 'Helvetica Neue', system-ui, sans-serif;
	--font-body: 'Plus Jakarta Sans', 'Helvetica Neue', system-ui, sans-serif;

	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	/* Escala display (Bricolage Grotesque, bold 700; ênfase = cor magenta) */
	--weight-display: 700;
	--weight-quote: 500;
	--fs-display: clamp(48px, 6vw, 80px);
	--lh-display: 1.02;
	--fs-h1: clamp(40px, 4.6vw, 60px);
	--lh-h1: 1.06;
	--fs-h2: clamp(32px, 3.4vw, 46px);
	--lh-h2: 1.1;
	--fs-h3: 30px;
	--lh-h3: 1.18;
	--fs-h4: 23px;
	--lh-h4: 1.25;
	--fs-quote: clamp(28px, 3vw, 40px);
	--lh-quote: 1.25;

	/* Escala de texto (Plus Jakarta Sans) */
	--fs-lead: 20px;
	--lh-lead: 1.6;
	--fs-body: 17px;
	--lh-body: 1.65;
	--fs-small: 15px;
	--lh-small: 1.55;
	--fs-caption: 13px;
	--lh-caption: 1.45;

	/* Eyebrow */
	--fs-eyebrow: 12px;
	--ls-eyebrow: .2em;
	--weight-eyebrow: 600;

	--ls-display: -.025em;
	--ls-tight: -.01em;
}

/* ==========================================================================
   Tokens — espaçamento, raios, sombras, movimento
   ========================================================================== */
:root {
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	--section-y: clamp(72px, 9vw, 128px);
	--container: 1200px;
	--container-narrow: 760px;
	--container-header: 1320px;
	--gutter: clamp(20px, 4vw, 40px);
	--header-h: 84px;

	--radius-xs: 6px;
	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-xl: 36px;
	--radius-pill: 999px;

	--shadow-xs: 0 1px 2px rgba(45, 27, 78, .06);
	--shadow-card: 0 1px 2px rgba(45, 27, 78, .04), 0 12px 32px -12px rgba(45, 27, 78, .14);
	--shadow-card-hover: 0 2px 4px rgba(45, 27, 78, .05), 0 22px 48px -16px rgba(45, 27, 78, .22);
	--shadow-header: 0 1px 0 rgba(45, 27, 78, .06), 0 8px 24px -16px rgba(45, 27, 78, .18);
	--shadow-cta: 0 10px 24px -10px rgba(194, 24, 91, .55);

	--ease-out: cubic-bezier(.22, .61, .36, 1);
	--ease-soft: cubic-bezier(.4, 0, .2, 1);
	--dur-fast: 140ms;
	--dur-base: 240ms;
	--dur-slow: 480ms;
}

/* ==========================================================================
   Base (tokens/base.css)
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--text-body);
	background: var(--surface-page);
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	color: var(--text-heading);
	letter-spacing: var(--ls-display);
	margin: 0;
	text-wrap: balance;
}

h1 em, h2 em, h3 em, h4 em, .asla-display em {
	font-style: normal;
	color: var(--magenta-600);
}

p {
	margin: 0;
	text-wrap: pretty;
}

a {
	color: var(--link);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--link-hover);
}

img {
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--magenta-100);
	color: var(--plum-800);
}

:focus-visible {
	outline: 2px solid var(--magenta-600);
	outline-offset: 3px;
}