/**
 * Leno Design — design tokens (raw + semantic).
 * Visual foundation only; no page-specific layouts.
 */

:root {
	/* -------------------------------------------------------------------------
	   Raw reference colors (sampled from approved mockup — do not alter)
	   ------------------------------------------------------------------------- */
	--ld-raw-navy: #0e2947;
	--ld-raw-copper: #ba6542;
	--ld-raw-ivory: #faf9f8;
	--ld-raw-sand: #e7e0da;
	--ld-raw-ink: #1d2229;
	--ld-raw-muted: #5c5c5d;
	--ld-raw-border: #d3d1d0;
	--ld-raw-white: #ffffff;

	/* Derived interactive copper (AA for white text; sampled copper is decorative) */
	--ld-raw-copper-accessible: #8f4428;
	--ld-raw-copper-hover: #78361f;
	--ld-raw-navy-hover: #0a1f36;

	/* -------------------------------------------------------------------------
	   Semantic colors
	   ------------------------------------------------------------------------- */
	--ld-color-primary: var(--ld-raw-copper-accessible);
	--ld-color-primary-hover: var(--ld-raw-copper-hover);
	--ld-color-accent: var(--ld-raw-copper);
	--ld-color-brand: var(--ld-raw-navy);
	--ld-color-brand-hover: var(--ld-raw-navy-hover);
	--ld-color-background: var(--ld-raw-ivory);
	--ld-color-surface: var(--ld-raw-white);
	--ld-color-surface-muted: var(--ld-raw-sand);
	--ld-color-text: var(--ld-raw-ink);
	--ld-color-text-muted: var(--ld-raw-muted);
	--ld-color-border: var(--ld-raw-border);
	--ld-color-focus: var(--ld-raw-navy);
	--ld-color-on-primary: var(--ld-raw-white);
	--ld-color-on-brand: var(--ld-raw-white);

	/* -------------------------------------------------------------------------
	   Typography
	   ------------------------------------------------------------------------- */
	--ld-font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
	--ld-font-weight-light: 300;
	--ld-font-weight-regular: 400;
	--ld-font-weight-medium: 500;
	--ld-font-weight-semibold: 600;
	--ld-font-weight-bold: 700;

	--ld-font-size-label: 0.75rem; /* 12px */
	--ld-font-size-body-sm: 0.875rem; /* 14px */
	--ld-font-size-body: 0.9375rem; /* 15px desktop base */
	--ld-font-size-body-lg: 1rem; /* 16px */
	--ld-font-size-h3: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem);
	--ld-font-size-h2: clamp(1.3rem, 1.8vw, 1.75rem);
	--ld-font-size-h1: clamp(1.8rem, 2.6vw, 2.55rem);
	--ld-font-size-display: clamp(1.8rem, 2.6vw, 2.55rem);

	--ld-line-height-tight: 1.35;
	--ld-line-height-snug: 1.5;
	--ld-line-height-body: 1.7;
	--ld-line-height-relaxed: 1.75;

	--ld-letter-spacing-label: 0.02em;
	--ld-letter-spacing-none: 0;

	/* -------------------------------------------------------------------------
	   Spacing (4px base)
	   ------------------------------------------------------------------------- */
	--ld-space-1: 0.25rem; /* 4 */
	--ld-space-2: 0.5rem; /* 8 */
	--ld-space-3: 0.75rem; /* 12 */
	--ld-space-4: 1rem; /* 16 */
	--ld-space-5: 1.25rem; /* 20 */
	--ld-space-6: 1.5rem; /* 24 */
	--ld-space-8: 2rem; /* 32 */
	--ld-space-10: 2.5rem; /* 40 */
	--ld-space-12: 3rem; /* 48 */
	--ld-space-16: 4rem; /* 64 */
	--ld-space-20: 5rem; /* 80 */
	--ld-space-24: 6rem; /* 96 */

	/* -------------------------------------------------------------------------
	   Layout / containers
	   ------------------------------------------------------------------------- */
	--ld-container-narrow: 42rem; /* ~672px text measure */
	--ld-container: 75rem; /* 1200px */
	--ld-container-wide: 90rem; /* 1440px */
	--ld-gutter-mobile: 1rem; /* 16 */
	--ld-gutter-tablet: 1.5rem; /* 24 */
	--ld-gutter-desktop: 2rem; /* 32 */

	/* Breakpoint reference (documentation; use in media queries as literals)
	   --ld-bp-sm: 480px;
	   --ld-bp-md: 768px;
	   --ld-bp-lg: 1024px;
	   --ld-bp-xl: 1280px;
	*/

	/* -------------------------------------------------------------------------
	   Radii
	   ------------------------------------------------------------------------- */
	--ld-radius-sm: 0.25rem; /* 4 */
	--ld-radius-md: 0.5rem; /* 8 */
	--ld-radius-lg: 0.75rem; /* 12 — cards */
	--ld-radius-xl: 0.875rem; /* 14 — features / home cards */
	--ld-radius-pill: 999px;

	/* -------------------------------------------------------------------------
	   Borders / shadows / focus / motion / z-index
	   ------------------------------------------------------------------------- */
	--ld-border-width: 1px;
	--ld-border: var(--ld-border-width) solid var(--ld-color-border);

	--ld-shadow-soft: 0 1px 2px rgb(14 41 71 / 0.04), 0 4px 12px rgb(14 41 71 / 0.06);
	--ld-shadow-elevated: 0 4px 8px rgb(14 41 71 / 0.06), 0 12px 28px rgb(14 41 71 / 0.1);

	--ld-focus-ring-width: 2px;
	--ld-focus-ring-offset: 2px;
	--ld-focus-ring: 0 0 0 var(--ld-focus-ring-width) var(--ld-color-surface),
		0 0 0 calc(var(--ld-focus-ring-width) + var(--ld-focus-ring-offset)) var(--ld-color-focus);

	--ld-transition-fast: 120ms ease;
	--ld-transition: 200ms ease;

	--ld-z-base: 1;
	--ld-z-dropdown: 100;
	--ld-z-sticky: 200;
	--ld-z-overlay: 300;
	--ld-z-modal: 400;
	--ld-z-toast: 500;
	--ld-z-skip: 100000;
}