:root{
/* Spacing — 4px base, chunky at the top end for a roomy mobile feel */
--space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;
--space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;
--space-11:64px;--space-12:80px;--space-13:96px;

/* Radii — generous, matching the logo's rounded gate */
--radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;
--radius-2xl:36px;--radius-arch:28px 28px 12px 12px;--radius-pill:999px;--radius-circle:50%;

/* Elevation — warm, low-contrast, never grey-blue */
--shadow-xs:0 1px 2px rgba(15,36,34,.06);
--shadow-sm:0 2px 6px rgba(15,36,34,.07);
--shadow-md:0 6px 18px -4px rgba(15,36,34,.12),0 2px 6px rgba(15,36,34,.05);
--shadow-lg:0 18px 40px -12px rgba(15,36,34,.20),0 4px 12px rgba(15,36,34,.06);
--shadow-brand:0 10px 24px -8px rgba(18,112,110,.45);
--shadow-accent:0 10px 24px -8px rgba(249,122,31,.42);
--shadow-inset-press:inset 0 2px 4px rgba(15,36,34,.16);

/* Borders */
--border-width:1px; /* @kind other */
--border-width-strong:2px; /* @kind other */
--border-dash:6px 5px; /* @kind other */

/* Motion — quick, with one springy accent curve for playful moments */
--dur-fast:120ms; /* @kind other */
--dur-base:180ms; /* @kind other */
--dur-slow:260ms; /* @kind other */
--dur-lazy:420ms; /* @kind other */
--ease-out:cubic-bezier(.22,1,.36,1); /* @kind other */
--ease-in-out:cubic-bezier(.5,0,.3,1); /* @kind other */
--ease-spring:cubic-bezier(.34,1.56,.64,1); /* @kind other */
--press-scale:.97; /* @kind other */
--hover-lift:-2px; /* @kind other */

/* Layout */
--container-app:390px;--container-max:1200px;--content-measure:66ch; /* @kind spacing */
--gutter-app:20px;--gutter-web:32px;
--tap-min:44px; /* @kind spacing */
--nav-height:64px; /* @kind spacing */
--header-height:56px; /* @kind spacing */
--z-nav:40; /* @kind other */
--z-sheet:60; /* @kind other */
--z-toast:80; /* @kind other */

/* Signature textures. Route = the logo's dashed arch, Tile = Damascene tilework. */
--pattern-route:repeating-linear-gradient(90deg,var(--teal-300) 0 8px,transparent 8px 15px); /* @kind other */
--pattern-tile:radial-gradient(circle at 0 0,rgba(18,112,110,.10) 3px,transparent 3.5px),radial-gradient(circle at 22px 22px,rgba(18,112,110,.10) 3px,transparent 3.5px); /* @kind other */
--pattern-tile-size:44px 44px; /* @kind other */
--pattern-ablaq:repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 14px,rgba(255,255,255,0) 14px 28px); /* @kind other */
}