/**
 * Mayra Chaparro Child Theme - Design Tokens
 *
 * This file defines the visual foundation variables of the brand design system,
 * as outlined in the Brand Book v1.0.
 */

:root {
	/* ==========================================================================
	   1. Colors (Base Palette)
	   ========================================================================== */
	--color-primary: #8CA38F;          /* Sage Green - Calm, Prevention, Health */
	--color-secondary: #E8D5D2;        /* Soft Pink - Trust, Warm Personality */
	--color-base-white: #FAF8F5;       /* Warm White - Neutral bright background */
	--color-base-arena: #F4EFEA;       /* Light Sand - Warm block containers */
	
	/* Warm Grays */
	--color-neutral-dark: #2F2E2C;     /* Body Text - Deep charcoal warm gray */
	--color-neutral-muted: #7A7571;    /* Muted Text - Secondary detail gray */
	--color-border-raw: #E3DDD5;       /* Raw border color */

	/* ==========================================================================
	   2. Semantic Colors
	   ========================================================================== */
	--surface: var(--color-base-white);
	--surface-alt: var(--color-base-arena);
	--surface-accent: var(--color-secondary);
	--text-primary: var(--color-neutral-dark);
	--text-secondary: var(--color-neutral-muted);
	--border-subtle: var(--color-border-raw);

	/* ==========================================================================
	   3. Typography
	   ========================================================================== */
	/* Default System Font Stack (Final selection defined in Sprint DS-02) */
	--font-family-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--font-family-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

	/* Typography Scales */
	--font-size-2xs: 0.75rem;    /* 12px */
	--font-size-xs: 0.875rem;   /* 14px */
	--font-size-sm: 0.9375rem;  /* 15px */
	--font-size-md: 1rem;       /* 16px */
	--font-size-lg: 1.125rem;   /* 18px */
	--font-size-xl: 1.25rem;    /* 20px */
	--font-size-2xl: 1.5rem;    /* 24px */
	--font-size-3xl: 2rem;      /* 32px */
	--font-size-4xl: 2.5rem;    /* 40px */
	--font-size-5xl: 3.25rem;   /* 52px */

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

	--line-height-tight: 1.2;
	--line-height-snug: 1.4;
	--line-height-normal: 1.6;
	--line-height-relaxed: 1.8;

	/* ==========================================================================
	   4. Spacing System (Mobile-First)
	   ========================================================================== */
	--space-2xs: 0.25rem;       /* 4px */
	--space-xs: 0.5rem;         /* 8px */
	--space-sm: 0.75rem;        /* 12px */
	--space-md: 1rem;           /* 16px */
	--space-lg: 1.5rem;         /* 24px */
	--space-xl: 2rem;           /* 32px */
	--space-2xl: 3rem;          /* 48px */
	--space-3xl: 4.5rem;        /* 72px */

	/* ==========================================================================
	   5. Borders & Radius
	   ========================================================================== */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-pill: 9999px;

	/* ==========================================================================
	   6. Shadows (Subtle, soft diffusion)
	   ========================================================================== */
	--shadow-xs: 0 1px 2px rgba(47, 46, 44, 0.02);
	--shadow-sm: 0 2px 4px rgba(47, 46, 44, 0.03);
	--shadow-md: 0 4px 12px rgba(47, 46, 44, 0.04);
	--shadow-lg: 0 8px 24px rgba(47, 46, 44, 0.05);

	/* ==========================================================================
	   7. Motion (Transitions)
	   ========================================================================== */
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

	/* ==========================================================================
	   8. Layers (Stacking context)
	   ========================================================================== */
	--z-base: 0;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-modal: 1000;
	--z-toast: 2000;
}