/**
 * Teton Troutfitters — Design Tokens
 *
 * CSS custom properties only. No element-targeting rules.
 * All element styling is controlled by the Elementor Kit (post 1366).
 * These tokens are consumed by component CSS (fishing reports, booking card, etc).
 */

:root {
	/* Colors — Primary */
	--tt-teal:          #2a4a52;
	--tt-teal-light:    #3a6a75;
	--tt-teal-dark:     #1e3a40;
	--tt-gold:          #b8843a;
	--tt-gold-hover:    #d4a55a;
	--tt-gold-light:    #e8c88a;

	/* Colors — Neutrals */
	--tt-white:         #ffffff;
	--tt-cream:         #faf7f2;
	--tt-cream-dark:    #f0ede8;
	--tt-text:          #1a1a18;
	--tt-text-muted:    #7a7265;
	--tt-border:        rgba(196, 189, 178, 0.4);
	--tt-border-strong: rgba(196, 189, 178, 0.7);

	/* Colors — Status */
	--tt-success:       #29972e;
	--tt-success-bg:    #e6f4ea;
	--tt-info:          #1a6a8a;
	--tt-info-bg:       #e3f0f7;
	--tt-warning:       #bf6b00;
	--tt-warning-bg:    #fff8e1;
	--tt-error:         #c62828;
	--tt-error-bg:      #fdecea;

	/* Type Scale — Major Third (1.25) */
	--tt-fs-xs:         0.8125rem;  /* 13px */
	--tt-fs-sm:         0.875rem;   /* 14px */
	--tt-fs-base:       1rem;       /* 16px */
	--tt-fs-md:         1.125rem;   /* 18px */
	--tt-fs-lg:         1.25rem;    /* 20px */
	--tt-fs-xl:         1.5625rem;  /* 25px */
	--tt-fs-2xl:        1.9375rem;  /* 31px */
	--tt-fs-3xl:        2.4375rem;  /* 39px */
	--tt-fs-4xl:        3.0625rem;  /* 49px */
	--tt-fs-5xl:        3.8125rem;  /* 61px */

	/* Line Heights */
	--tt-lh-tight:      1.15;
	--tt-lh-snug:       1.3;
	--tt-lh-normal:     1.5;
	--tt-lh-relaxed:    1.65;

	/* Font Families */
	--tt-font-display:  'Slathers', 'Georgia', serif;
	--tt-font-heading:  'Cabin', 'Avenir', 'Helvetica Neue', sans-serif;
	--tt-font-body:     'Avenir', 'Helvetica Neue', Arial, sans-serif;

	/* Spacing Scale */
	--tt-space-xs:      0.25rem;
	--tt-space-sm:      0.5rem;
	--tt-space-md:      1rem;
	--tt-space-lg:      1.5rem;
	--tt-space-xl:      2rem;
	--tt-space-2xl:     3rem;
	--tt-space-3xl:     4rem;

	/* Border Radius */
	--tt-radius-sm:     4px;
	--tt-radius-md:     8px;
	--tt-radius-lg:     12px;

	/* Shadows */
	--tt-shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.08);
	--tt-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.1);
	--tt-shadow-lg:     0 8px 24px rgba(0, 0, 0, 0.12);
}