/*
 * Lake Day Boat Rentals — design tokens
 * Source of truth: client/src/index.css (Manus) + BRANDING.md
 * Format: OKLCH primary, hex fallback for reference only.
 * All non-prefixed token values match the original Tailwind 4 setup so widget
 * CSS can use the same variable names with no rewrites.
 */

:root {
	/* Brand palette */
	--ldr-lake:            oklch(0.55 0.12 230);     /* #2A8DB5 — primary interactive */
	--ldr-lake-light:      oklch(0.92 0.04 230);     /* #E0F0F7 — soft bg */
	--ldr-lake-dark:       oklch(0.35 0.10 230);     /* #1A5A78 — hover/text-on-light */
	--ldr-gold:            oklch(0.72 0.14 75);      /* #D4943A — CTA */
	--ldr-gold-light:      oklch(0.92 0.06 75);      /* #F5EBD8 */
	--ldr-navy:            oklch(0.25 0.06 250);     /* #1B2A3D — primary text + dark sections */
	--ldr-navy-light:      oklch(0.40 0.06 250);     /* #3A4D63 */

	/* Neutral / surface */
	--ldr-bg:              oklch(0.995 0.002 75);    /* #FEFDFB — warm off-white page bg */
	--ldr-fg:              oklch(0.20 0.04 250);     /* primary text */
	--ldr-card:            oklch(1 0 0);             /* pure white cards */
	--ldr-card-fg:         oklch(0.20 0.04 250);
	--ldr-secondary:       oklch(0.96 0.01 230);
	--ldr-secondary-fg:    oklch(0.30 0.06 250);
	--ldr-muted:           oklch(0.96 0.008 230);
	--ldr-muted-fg:        oklch(0.50 0.03 250);     /* #6B7A8D — muted text/captions */
	--ldr-border:          oklch(0.91 0.01 230);
	--ldr-input:           oklch(0.91 0.01 230);
	--ldr-ring:            oklch(0.55 0.12 230);
	--ldr-destructive:     oklch(0.577 0.245 27.325);

	/* Radii */
	--ldr-radius:          0.625rem;                  /* 10px — base */
	--ldr-radius-sm:       calc(var(--ldr-radius) - 4px);
	--ldr-radius-md:       calc(var(--ldr-radius) - 2px);
	--ldr-radius-lg:       var(--ldr-radius);
	--ldr-radius-xl:       calc(var(--ldr-radius) + 4px);
	--ldr-radius-pill:     9999px;

	/* Typography */
	--ldr-font-heading:    "Montserrat", sans-serif;
	--ldr-font-body:       "Open Sans", sans-serif;

	/* Type scale (mobile values; desktop overrides via media query below) */
	--ldr-fs-h1:           2.25rem;   /* 36 → 72 desktop */
	--ldr-fs-h2:           1.875rem;  /* 30 → 40 */
	--ldr-fs-h3:           1.25rem;   /* 20 */
	--ldr-fs-body-lg:      1.125rem;  /* 18 → 20 */
	--ldr-fs-body:         1rem;      /* 16 */
	--ldr-fs-caption:      0.875rem;  /* 14 */

	--ldr-lh-tight:        1.1;
	--ldr-lh-snug:         1.3;
	--ldr-lh-body:         1.6;
	--ldr-lh-relaxed:      1.75;

	--ldr-tracking-nav:    0.05em;
	--ldr-tracking-cta:    0.02em;

	/* Shadows */
	--ldr-shadow-sm:       0 1px 2px 0 rgb(0 0 0 / 0.05);
	--ldr-shadow:          0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--ldr-shadow-md:       0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--ldr-shadow-lg:       0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--ldr-shadow-xl:       0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--ldr-shadow-gold-cta: 0 4px 20px oklch(0.72 0.14 75 / 0.3);

	/* Transitions */
	--ldr-ease:            cubic-bezier(0.4, 0, 0.2, 1);
	--ldr-dur-fast:        150ms;
	--ldr-dur-base:        300ms;
	--ldr-dur-slow:        500ms;

	/* Layout */
	--ldr-container-max:   1280px;
	--ldr-bp-sm:           640px;
	--ldr-bp-md:           768px;
	--ldr-bp-lg:           1024px;
	--ldr-bp-xl:           1280px;

	/* Z-index scale */
	--ldr-z-header:        50;
	--ldr-z-modal:         100;
	--ldr-z-toast:         200;
}

/* Desktop type-scale overrides (≥1024px). Match the source's sm: and lg: jumps. */
@media (min-width: 640px) {
	:root {
		--ldr-fs-h2:       2.5rem;     /* 40px */
		--ldr-fs-body-lg:  1.25rem;    /* 20px */
	}
}

@media (min-width: 1024px) {
	:root {
		--ldr-fs-h1:       4.5rem;     /* 72px */
	}
}