/*
 * LiveSpecial — Design Tokens
 * Mirrors theme.json 1:1. theme.json is the source of truth; if you change a
 * value there, change it here. Source: LSRD26-14 attachment tokens.css.
 */

:root {
	/* ── Brand ─────────────────────────────────────────── */
	--ls-primary:            #193667;           /* Dark blue — main brand   */
	--ls-secondary:          #EC720A;           /* Orange — CTA / accent    */
	--ls-accent:             #A0237F;           /* Magenta — tertiary       */
	--ls-brand-green:        #72AA4F;
	--ls-brand-light-blue:   #34B5E6;

	/* ── Surfaces ──────────────────────────────────────── */
	--ls-background:         #FFFFFF;
	--ls-foreground:         #193667;
	--ls-muted:              #EEF1F7;
	--ls-muted-foreground:   #4A5168;
	--ls-white:              #FFFFFF;

	/* ── Border / focus ────────────────────────────────── */
	--ls-border:             rgba( 25, 54, 103, 0.1 );
	--ls-border-on-dark:     rgba( 255, 255, 255, 0.2 );
	--ls-ring:               #193667;

	/* ── Radius ────────────────────────────────────────── */
	--ls-radius:             0.75rem;           /* base            */
	--ls-radius-lg:          0.5rem;            /* nav items       */
	--ls-radius-card:        1rem;              /* cards           */
	--ls-radius-full:        9999px;            /* buttons / pills */

	/* ── Typography ────────────────────────────────────── */
	--ls-font:               transat-text, Arial, Helvetica, sans-serif;
	--ls-fs-xs:              0.8125rem;         /* 13px */
	--ls-fs-sm:              0.875rem;          /* 14px */
	--ls-fs-base:            0.9375rem;         /* 15px */
	--ls-fs-md:              1rem;              /* 16px */
	--ls-fs-lg:              1.125rem;          /* 18px */
	--ls-fs-xl:              1.375rem;          /* 22px */
	--ls-fs-2xl:             1.75rem;           /* 28px */
	--ls-fs-3xl:             2.25rem;           /* 36px */
	--ls-fs-4xl:             3rem;              /* 48px */

	/*
	 * Weight tokens. Typekit kit cru8mma ships transat-text at 300/400/500/700/900.
	 * The design calls for 600 (font-semibold), which the kit does NOT contain —
	 * see LSRD26-14 finding. Until the kit is extended, 600 maps to 700 so the
	 * browser uses a real face instead of synthesising one.
	 */
	--ls-fw-light:           300;
	--ls-fw-normal:          400;
	--ls-fw-medium:          500;
	--ls-fw-semibold:        700;  /* intentional: 600 unavailable in kit */
	--ls-fw-bold:            700;
	--ls-fw-black:           900;

	/* ── Layout ────────────────────────────────────────── */
	--ls-content:            768px;
	--ls-wide:               1280px;
	--ls-gutter:             1.25rem;           /* 20px  (px-5)     */
	--ls-header-h:           72px;
	--ls-nav-breakpoint:     1024px;            /* lg — nav collapses */

	/* ── Shadows ───────────────────────────────────────── */
	--ls-shadow-sm:          0 1px 2px 0 rgba( 25, 54, 103, 0.08 );
	--ls-shadow-md:          0 4px 12px -2px rgba( 25, 54, 103, 0.12 );

	/* ── Motion ────────────────────────────────────────── */
	--ls-transition:         150ms cubic-bezier( 0.4, 0, 0.2, 1 );

	/* ── Brand gradient (heroes / feature cards) ───────── */
	--ls-gradient-hero:      linear-gradient( 135deg, #193667 0%, #EC720A 100% );
	--ls-pattern-opacity:    0.05;
}

@media ( min-width: 640px ) {
	:root { --ls-gutter: 2rem; } /* 32px (sm:px-8) */
}