/* ============================================================
   Óptica Sara — design tokens (:root custom properties)
   Ported verbatim from the Óptica Sara Design System
   (tokens/colors.css, typography.css, spacing.css). These power the
   component classes in theme.css. The block editor palette lives in
   theme.json; this is the full ramp + semantic aliases for components.
   ============================================================ */

:root {
	/* ---- Teal (primary / action) -------------------------- */
	--teal-50:  #E6F4F9;
	--teal-100: #C2E4EF;
	--teal-200: #8FCDE2;
	--teal-300: #54B2D3;
	--teal-400: #1E97C2;
	--teal-500: #007DAB;
	--teal-600: #006B94;
	--teal-700: #00567A;
	--teal-800: #084A66;
	--teal-900: #0C3C53;

	/* ---- Navy (structure) --------------------------------- */
	--navy-50:  #EEF2F7;
	--navy-100: #D4DEEA;
	--navy-200: #A6BAD0;
	--navy-300: #7491B2;
	--navy-400: #466B92;
	--navy-500: #2A4F76;
	--navy-600: #1C3F63;
	--navy-700: #163350;
	--navy-800: #11263C;
	--navy-900: #0C1B2B;

	/* ---- Neutrals (cool slate) ---------------------------- */
	--white:       #FFFFFF;
	--neutral-50:  #F6F8FA;
	--neutral-100: #EDF1F4;
	--neutral-200: #DDE4EA;
	--neutral-300: #C5D0D9;
	--neutral-400: #9AA8B4;
	--neutral-500: #6E7C88;
	--neutral-600: #51606C;
	--neutral-700: #3A4954;
	--neutral-800: #26323B;
	--neutral-900: #14222E;

	/* ---- Accent (warm — promotions only) ------------------ */
	--amber-100: #FBEBD0;
	--amber-300: #F2C879;
	--amber-500: #EC9A2E;
	--amber-600: #C97E1E;

	/* ---- Status ------------------------------------------- */
	--success-soft: #E2F2EA;
	--success:      #1F8A5B;
	--warning-soft: #FBEFD6;
	--warning:      #C97E1E;
	--danger-soft:  #F8E3E1;
	--danger:       #D24B45;

	/* ---- Semantic aliases --------------------------------- */
	--text-strong:     var(--navy-600);
	--text-body:       var(--neutral-800);
	--text-muted:      var(--neutral-500);
	--text-subtle:     var(--neutral-400);
	--text-link:       var(--teal-600);
	--text-link-hover: var(--teal-700);

	--surface-page:        var(--white);
	--surface-subtle:      var(--neutral-50);
	--surface-sunken:      var(--neutral-100);
	--surface-card:        var(--white);
	--surface-brand:       var(--teal-500);
	--surface-brand-hover: var(--teal-600);
	--surface-brand-soft:  var(--teal-50);
	--surface-navy:        var(--navy-600);
	--surface-navy-soft:   var(--navy-50);
	--surface-promo:       var(--amber-500);

	--border-subtle:  var(--neutral-200);
	--border-default: var(--neutral-300);
	--border-strong:  var(--navy-600);
	--border-brand:   var(--teal-500);

	--focus-ring: var(--teal-400);

	--overlay-scrim: rgba(12, 27, 43, 0.55);
	--overlay-hero:  rgba(12, 27, 43, 0.38);

	/* ---- Type --------------------------------------------- */
	--font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body:    'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-ui:      'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;
	--fw-extra:    800;

	--fs-display:  clamp(2.75rem, 1.8rem + 4vw, 4.5rem);
	--fs-h1:       clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
	--fs-h2:       clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
	--fs-h3:       clamp(1.4rem, 1.2rem + 0.9vw, 1.875rem);
	--fs-h4:       1.375rem;
	--fs-h5:       1.125rem;
	--fs-lead:     1.25rem;
	--fs-body-lg:  1.0625rem;
	--fs-base:     1rem;
	--fs-sm:       0.875rem;
	--fs-xs:       0.75rem;

	--leading-tight:   1.1;
	--leading-snug:    1.25;
	--leading-normal:  1.5;
	--leading-relaxed: 1.7;

	--tracking-tight:   -0.02em;
	--tracking-normal:  0;
	--tracking-wide:    0.04em;
	--tracking-eyebrow: 0.14em;

	/* ---- Spacing (4px base) ------------------------------- */
	--space-0:  0;
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.5rem;
	--space-6:  2rem;
	--space-7:  2.5rem;
	--space-8:  3rem;
	--space-9:  4rem;
	--space-10: 5rem;
	--space-11: 6rem;
	--space-12: 8rem;

	/* ---- Radii -------------------------------------------- */
	--radius-xs:   4px;
	--radius-sm:   8px;
	--radius-md:   12px;
	--radius-lg:   16px;
	--radius-xl:   24px;
	--radius-2xl:  32px;
	--radius-pill: 999px;

	/* ---- Shadows (soft, navy-tinted) ---------------------- */
	--shadow-xs:    0 1px 2px rgba(12, 27, 43, 0.06);
	--shadow-sm:    0 2px 6px rgba(12, 27, 43, 0.08);
	--shadow-md:    0 8px 20px rgba(12, 27, 43, 0.10);
	--shadow-lg:    0 16px 40px rgba(12, 27, 43, 0.14);
	--shadow-brand: 0 10px 26px rgba(0, 125, 171, 0.28);

	/* ---- Layout ------------------------------------------- */
	--container-max: 1200px;
	--container-narrow: 760px;
	--gutter: clamp(1.25rem, 4vw, 4rem);
	--header-height: 84px;

	/* ---- Motion ------------------------------------------- */
	--ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast:    140ms;
	--dur-normal:  240ms;
	--dur-slow:    420ms;
}