/* =====================================================================
	Project Español – Design Tokens
	---------------------------------------------------------------------
	This file centralizes brand primitives + semantic aliases.
	Keep tokens immutable when possible; compose new usage-specific
	styles in component layers instead of redefining here.
	===================================================================== */

/* ---------------------------------------------------------------------
	1. Core Brand Palette (Primitives)
	------------------------------------------------------------------ */
:root {
  /* Brand / Core Colors */
  --color-bg: #6daa62; /* Background field green */
  --color-surface: #f1eedc; /* Primary surface / cards */
  --color-surface-alt: #e9e5d0; /* Subtle alt surface (panels/modals) */
  --color-accent: #f28c3a; /* Primary accent / main CTAs */
  --color-accent-alt: #8cc7e9; /* Secondary accent / secondary CTAs */
  --color-warn: #f6e27a; /* Focus + highlight (do NOT use for text) */
  --color-ink: #0e0f10; /* Primary text / strong border */
  --color-ink-subtle: #1f2326; /* Subdued text */

  /* Extended Semantic Additions */
  --color-border: var(--color-ink); /* Standard border alias */
  --color-text: var(--color-ink); /* Body text alias */
  --color-text-muted: var(--color-ink-subtle);
  --color-focus: var(--color-warn); /* Alias for accessibility outlines */
  --color-danger: #c4372c; /* Destructive / errors */
  --color-success: #2f7d38; /* Success confirmations */
  --color-info: #3a6ea8; /* Informational highlights */

  /* (Optional) Neutral Scale – Reserved (commented out for now)
  --neutral-50:  #f7f7f6;
  --neutral-100: #ececea;
  --neutral-200: #d8d8d5;
  --neutral-300: #c2c2be;
  --neutral-400: #a2a29d;
  --neutral-500: #7f7f79;
  --neutral-600: #5f5f5a;
  --neutral-700: #484844;
  --neutral-800: #2e2e2b;
  --neutral-900: #171716;
  */

  /* -------------------------------------------------------------------
	  2. Typography Scale (Fluid where helpful)
	  ---------------------------------------------------------------- */
  --fs-xs: clamp(0.68rem, 0.63rem + 0.25vw, 0.75rem);
  --fs-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem);
  --fs-base: clamp(0.95rem, 0.9rem + 0.4vw, 1.05rem); /* Body */
  --fs-lg: clamp(1.05rem, 0.95rem + 0.8vw, 1.25rem); /* Lead / hero sub */
  --fs-xl: clamp(1.7rem, 1.4rem + 1.8vw, 2.4rem); /* Section Title */
  --fs-xxl: clamp(2.4rem, 1.8rem + 4.4vw, 5rem); /* Hero Title */

  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line-height guidance (applied in components/layout) */
  --lh-body: 1.45;
  --lh-heading-tight: 1.05; /* Hero / very large */
  --lh-heading: 1.15; /* Section headings */
  --lh-ui: 1.15; /* Buttons / small labels */

  /* Font families */
  --ff-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --ff-sans-alt: ui-rounded, "Manrope", system-ui, sans-serif; /* optional playful alt */

  /* -------------------------------------------------------------------
	  3. Spacing Scale (4px baseline) – Use semantic clusters
	  ---------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;

  /* Layout container max widths */
  --container-narrow: 640px;
  --container-base: 740px;
  --container-wide: 960px;

  /* Border Radii (playful cutout feel) */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows (flat offset style) */
  --shadow-elev-1: 2px 2px 0 var(--color-ink);
  --shadow-elev-2: 4px 4px 0 var(--color-ink);
  --shadow-elev-3: 6px 6px 0 var(--color-ink);
  --shadow-elev-4: 8px 8px 0 var(--color-ink);

  /* Motion Tokens */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --ease-standard: cubic-bezier(0.2, 0.9, 0.35, 1);

  /* Misc */
  --focus-ring: 3px solid var(--color-focus);
}

/* ---------------------------------------------------------------------
	4. Recommended Element ↔ Token Mapping (Reference only)
	(Leave as comments for future contributors)
	------------------------------------------------------------------
	Hero Title: var(--fs-xxl) / weight 800 / lh var(--lh-heading-tight)
	Section Title: var(--fs-xl) / weight 700 / lh var(--lh-heading)
	Card Title: var(--fs-base) / weight 700
	Body Text: var(--fs-base) / weight 400 / lh var(--lh-body)
	Lead Text: var(--fs-lg) / weight 400–600
	Meta / Microcopy: var(--fs-sm) or var(--fs-xs)
	Button: var(--fs-sm) / weight 700 / lh var(--lh-ui)
	Caption / Legal: var(--fs-xs) / weight 400
	Spacing Patterns: 
	  - Section vertical: var(--space-8)–var(--space-9)
	  - Grid gaps: var(--space-5) desktop → var(--space-4) mobile
	  - Card padding: var(--space-5) / var(--space-4)
	  - Kicker → Heading: var(--space-5)
	  - Heading → Body: var(--space-4)
--------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
	5. Utility Helper Classes (Optional minimal set)
	Keep tiny; grow only on repeated need.
	------------------------------------------------------------------ */
.text-muted {
  color: var(--color-text-muted);
}
.surface-alt {
  background: var(--color-surface-alt);
}
.bordered {
  border: 2px solid var(--color-border);
}
.shadow-1 {
  box-shadow: var(--shadow-elev-1);
}
.shadow-2 {
  box-shadow: var(--shadow-elev-2);
}
.shadow-3 {
  box-shadow: var(--shadow-elev-3);
}

/* Focus outline utility */
.focus-ring:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------
	End Tokens
	------------------------------------------------------------------ */