/**
 * annCoach Design System — CSS Variables
 * Product: annCoach CMS 1.0 · Client brand: SMILE logo extraction
 *
 * Semantic tokens (--primary, --surface, …) are the public API.
 * Brand aliases (--ann-*) remain for backward compatibility.
 */

:root {
	/* ------------------------------------------------------------------ */
	/* Brand primitives (from logo.png)                                   */
	/* ------------------------------------------------------------------ */
	--brand-pink: #f8b8d0;
	--brand-pink-soft: #fde8f0;
	--brand-pink-deep: #e891b0;
	--brand-teal: #38b8d8;
	--brand-teal-soft: #e8f7fb;
	--brand-teal-deep: #1a9bb8;
	--brand-navy: #081840;
	--brand-navy-soft: #1a2d5a;
	--brand-gold: #f8c800;
	--brand-gold-soft: #fff6cc;
	--brand-gold-deep: #d4a800;

	--color-white: #ffffff;
	--color-gray-50: #fafbfc;
	--color-gray-100: #f3f5f8;
	--color-gray-200: #e8eef2;
	--color-gray-300: #d0d8e0;
	--color-gray-500: #5a6478;
	--color-gray-700: #4a5568;
	--color-success: #2f9e7a;
	--color-success-soft: #e6f6ef;
	--color-warning: #e8943a;
	--color-warning-soft: #fff4e8;
	--color-error: #d64545;
	--color-error-soft: #fdecec;
	--color-whatsapp: #25d366;

	/* ------------------------------------------------------------------ */
	/* Semantic API                                                       */
	/* ------------------------------------------------------------------ */
	--primary: var(--brand-pink);
	--primary-soft: var(--brand-pink-soft);
	--primary-deep: var(--brand-pink-deep);

	--secondary: var(--brand-teal);
	--secondary-soft: var(--brand-teal-soft);
	--secondary-deep: var(--brand-teal-deep);

	--accent: var(--brand-navy);
	--accent-soft: var(--brand-navy-soft);

	--highlight: var(--brand-gold);
	--highlight-soft: var(--brand-gold-soft);
	--highlight-deep: var(--brand-gold-deep);

	--background: var(--color-white);
	--surface: var(--color-gray-50);
	--surface-alt: var(--color-gray-100);
	--card: var(--color-white);

	--text-primary: var(--brand-navy);
	--text-secondary: var(--color-gray-700);
	--text-muted: var(--color-gray-500);
	--text-inverse: var(--color-white);

	--border: var(--color-gray-200);
	--border-strong: var(--color-gray-300);

	--button: var(--brand-teal);
	--button-hover: var(--brand-navy);
	--button-text: var(--color-white);
	--button-secondary: var(--brand-gold);
	--button-secondary-hover: var(--brand-gold-deep);
	--button-secondary-text: var(--brand-navy);

	--success: var(--color-success);
	--warning: var(--color-warning);
	--error: var(--color-error);
	--focus-ring: var(--brand-gold);

	/* ------------------------------------------------------------------ */
	/* Typography                                                         */
	/* ------------------------------------------------------------------ */
	--font-display: "Syne", "Poppins", system-ui, sans-serif;
	--font-heading: "Syne", "Poppins", system-ui, sans-serif;
	--font-body: "Figtree", "Nunito", system-ui, sans-serif;
	--font-reading: "Figtree", "Open Sans", system-ui, sans-serif;
	--font-ui: "Figtree", "Nunito", system-ui, sans-serif;

	--text-h1: clamp(1.85rem, 4vw, 2.75rem);
	--text-h2: clamp(1.4rem, 2.8vw, 1.95rem);
	--text-h3: clamp(1.25rem, 2vw, 1.5rem);
	--text-h4: 1.2rem;
	--text-h5: 1.05rem;
	--text-body: 1.0625rem;
	--text-caption: 0.9rem;
	--text-small: 0.8125rem;
	--text-button: 0.9375rem;

	--leading-tight: 1.2;
	--leading-snug: 1.35;
	--leading-normal: 1.65;
	--leading-relaxed: 1.8;

	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.06em;

	/* ------------------------------------------------------------------ */
	/* Spacing scale (4px base)                                           */
	/* ------------------------------------------------------------------ */
	--space-1: 0.25rem;  /* 4 */
	--space-2: 0.5rem;   /* 8 */
	--space-3: 0.75rem;  /* 12 */
	--space-4: 1rem;     /* 16 */
	--space-5: 1.5rem;   /* 24 */
	--space-6: 2rem;     /* 32 */
	--space-7: 2.5rem;   /* 40 */
	--space-8: 3rem;     /* 48 */
	--space-9: 4rem;     /* 64 */
	--space-10: 5rem;    /* 80 */
	--space-11: 6rem;    /* 96 */
	--space-12: 8rem;    /* 128 */

	--section-space-y: clamp(2.25rem, 4.5vw, 3.5rem);
	--section-space-y-sm: clamp(1.5rem, 3vw, 2.25rem);

	/* ------------------------------------------------------------------ */
	/* Layout                                                             */
	/* ------------------------------------------------------------------ */
	--container-max: 1140px;
	--container-narrow: 760px;
	--container-wide: 1280px;
	--container-pad: clamp(1rem, 3vw, 1.5rem);
	--header-height: 72px;
	--header-height-sticky: 64px;
	--topbar-height: 38px;

	/* ------------------------------------------------------------------ */
	/* Radii / elevation / motion                                         */
	/* ------------------------------------------------------------------ */
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-xl: 28px;
	--radius-card: 18px;
	--radius-button: 999px;
	--radius-input: 12px;

	--shadow-xs: 0 1px 2px rgba(8, 24, 64, 0.04);
	--shadow-sm: 0 2px 8px rgba(8, 24, 64, 0.06);
	--shadow-md: 0 10px 28px rgba(8, 24, 64, 0.08);
	--shadow-lg: 0 18px 48px rgba(8, 24, 64, 0.12);
	--shadow-focus: 0 0 0 3px rgba(248, 200, 0, 0.55);

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-fast: 0.18s;
	--duration: 0.35s;
	--duration-slow: 0.55s;

	--gradient-hero: linear-gradient(135deg, var(--primary-soft) 0%, var(--secondary-soft) 50%, var(--background) 100%);
	--gradient-cta: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-deep) 100%);
	--gradient-navy: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
	--gradient-pink: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);

	/* ------------------------------------------------------------------ */
	/* Backward-compatible aliases                                        */
	/* ------------------------------------------------------------------ */
	--ann-pink: var(--brand-pink);
	--ann-pink-soft: var(--brand-pink-soft);
	--ann-pink-deep: var(--brand-pink-deep);
	--ann-teal: var(--brand-teal);
	--ann-teal-soft: var(--brand-teal-soft);
	--ann-teal-deep: var(--brand-teal-deep);
	--ann-navy: var(--brand-navy);
	--ann-navy-soft: var(--brand-navy-soft);
	--ann-gold: var(--brand-gold);
	--ann-gold-soft: var(--brand-gold-soft);
	--ann-gold-deep: var(--brand-gold-deep);
	--ann-white: var(--color-white);
	--ann-soft-white: var(--surface);
	--ann-card: var(--card);
	--ann-border: var(--border);
	--ann-muted: var(--text-muted);
	--ann-text: var(--text-primary);
	--ann-text-light: var(--text-secondary);
	--ann-primary: var(--primary);
	--ann-secondary: var(--secondary);
	--ann-accent: var(--accent);
	--ann-highlight: var(--highlight);
	--ann-success: var(--success);
	--ann-danger: var(--error);
	--ann-gradient-hero: var(--gradient-hero);
	--ann-gradient-cta: var(--gradient-cta);
	--ann-gradient-pink: var(--gradient-pink);
	--ann-gradient-navy: var(--gradient-navy);
	--ann-font-display: var(--font-heading);
	--ann-font-body: var(--font-body);
	--ann-font-ui: var(--font-ui);
	--ann-space-xs: var(--space-2);
	--ann-space-sm: var(--space-4);
	--ann-space-md: var(--space-5);
	--ann-space-lg: var(--space-7);
	--ann-space-xl: var(--space-9);
	--ann-space-2xl: var(--space-11);
	--ann-radius-sm: var(--radius-sm);
	--ann-radius-md: var(--radius-md);
	--ann-radius-lg: var(--radius-lg);
	--ann-radius-btn: var(--radius-button);
	--ann-radius-card: var(--radius-card);
	--ann-shadow-sm: var(--shadow-sm);
	--ann-shadow-md: var(--shadow-md);
	--ann-shadow-lg: var(--shadow-lg);
	--ann-ease: var(--ease);
	--ann-duration: var(--duration);

	/* Parent theme bridge */
	--thim-body-primary-color: var(--secondary);
	--thim-font-title-color: var(--text-primary);
	--thim-border-radius-button: var(--radius-button);
	--thim-button-hover-color: var(--button-hover);
}

body.anncoach-theme {
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--leading-normal);
	color: var(--text-secondary);
	background: var(--background);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}