/* Dillydally Trails design tokens + base styles (copied from the design system: fonts, colors, typography, spacing, effects, base). */
/* Rubik = brand/logo display face (Google Fonts). Gotham is proprietary — Montserrat is the closest Google Fonts substitute; swap in Gotham via @font-face when licensed files are available. */
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700&display=swap");
:root{
/* Brand palette (Brand Guidelines §27) */
--dd-cobalt:#004CAC;
--dd-cream:#FFFCDE;
--dd-silver:#F1FFFF;
--dd-pearl:#F7F7F7;
--dd-dark:#252830;
/* Derived tints/shades (oklch-harmonised from the five brand colours) */
--dd-cobalt-hover:#003E8D;
--dd-cobalt-press:#003070;
--dd-cobalt-soft:#E3ECF8;
--dd-cobalt-tint:#BFD1EC;
--dd-ink-2:#4A4E58;
--dd-ink-3:#7A7E88;
--dd-line:#E2E3E6;
--dd-line-strong:#C9CBD0;
--dd-white:#FFFFFF;
/* Semantic aliases */
--surface-page:var(--dd-pearl);
--surface-card:var(--dd-white);
--surface-warm:var(--dd-cream);
--surface-cool:var(--dd-silver);
--surface-brand:var(--dd-cobalt);
--surface-dark:var(--dd-dark);
--text-body:var(--dd-dark);
--text-muted:var(--dd-ink-2);
--text-subtle:var(--dd-ink-3);
--text-on-brand:var(--dd-white);
--text-on-dark:var(--dd-pearl);
--text-link:var(--dd-cobalt);
--border-default:var(--dd-line);
--border-strong:var(--dd-line-strong);
--accent:var(--dd-cobalt);
--accent-hover:var(--dd-cobalt-hover);
--accent-press:var(--dd-cobalt-press);
--focus-ring:0 0 0 3px var(--dd-cobalt-tint);
/* Availability statuses — restrained, no artificial urgency */
--status-open:#1E7A4A;
--status-open-bg:#E4F3EA;
--status-limited:#8A5A00;
--status-limited-bg:#FBF1D6;
--status-waitlist:var(--dd-cobalt);
--status-waitlist-bg:var(--dd-cobalt-soft);
--status-soon:var(--dd-ink-2);
--status-soon-bg:#ECEDEF;
--status-sold:var(--dd-ink-3);
--status-sold-bg:#ECEDEF;
}
:root{
--font-display:"Rubik","Montserrat",system-ui,sans-serif;
--font-body:"Montserrat","Gotham",system-ui,sans-serif;
/* Type scale */
--text-hero:clamp(40px,6vw,84px);
--text-h1:clamp(36px,4.5vw,60px);
--text-h2:clamp(28px,3vw,40px);
--text-h3:24px;
--text-h4:18px;
--text-lg:18px;
--text-md:16px;
--text-sm:14px;
--text-xs:12px;
--text-eyebrow:12px;
/* Leading */
--leading-tight:1.05;
--leading-snug:1.2;
--leading-normal:1.55;
--leading-relaxed:1.7;
/* Tracking */
--tracking-display:-0.02em;
--tracking-normal:0;
--tracking-eyebrow:0.14em;
/* Weights */
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
--weight-black:800;
}
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
--section-y:var(--space-9);
--container-max:1280px;
--container-narrow:760px;
--gutter:var(--space-5);
--grid-gap:var(--space-5);
--card-pad:var(--space-5);
}
:root{
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:20px;--radius-pill:999px;
--shadow-card:0 1px 2px rgba(37,40,48,.06),0 8px 24px -12px rgba(37,40,48,.18);
--shadow-card-hover:0 2px 4px rgba(37,40,48,.06),0 18px 40px -16px rgba(37,40,48,.28);
--shadow-dialog:0 24px 64px -16px rgba(37,40,48,.4);
--protect-bottom:linear-gradient(180deg,rgba(37,40,48,0) 30%,rgba(37,40,48,.78) 100%); /* @kind other */
--protect-top:linear-gradient(0deg,rgba(37,40,48,0) 60%,rgba(37,40,48,.5) 100%); /* @kind other */
--ease-out:cubic-bezier(.22,1,.36,1); /* @kind other */
--ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
--dur-fast:160ms; /* @kind other */
--dur-base:280ms; /* @kind other */
--dur-slow:600ms; /* @kind other */
--blur-glass:12px;
}
:root{color-scheme:light}
body{margin:0;font-family:var(--font-body);font-size:var(--text-md);line-height:var(--leading-normal);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none;transition:opacity var(--dur-fast) var(--ease-out)}
a:hover{text-decoration:underline;text-underline-offset:3px}