/** * CLM Design Tokens * Single source of truth for color, spacing, typography, radius, and touch * target sizing. All other clm-*.css files consume these custom properties. * Mobile-first baseline: 375px. */ :root { /* --------------------------------------------------------------- Color — brand --------------------------------------------------------------- */ --clm-primary: #01696f; --clm-primary-hover: #0c4e54; --clm-primary-tint-10: #e0eeef; --clm-accent: #c9922e; --clm-accent-hover: #a97a20; --clm-bg: #f7f6f2; --clm-surface: #f9f8f5; --clm-surface-raised: #ffffff; --clm-border: #e4e1d8; --clm-text: #28251d; --clm-text-muted: #7a7974; --clm-text-inverse: #ffffff; --clm-success: #1e7e34; --clm-success-bg: #e6f4ea; --clm-error: #a12622; --clm-error-bg: #f7e6e6; --clm-warning: #8a6100; --clm-warning-bg: #fbf1d8; --clm-link: var(--clm-primary); --clm-link-visited: #0c4e54; /* --------------------------------------------------------------- Regional theme overrides — applied via a body/html data attribute or wrapper class, e.g. . Each region only needs to override the tokens that actually differ. --------------------------------------------------------------- */ } /* Summit County theme variant. */ [data-clm-region="summit"] { --clm-primary: #01696f; --clm-primary-hover: #0c4e54; --clm-accent: #c9922e; } /* Wasatch County theme variant — warmer accent for Heber/Midway/Kamas. */ [data-clm-region="wasatch"] { --clm-primary: #1f5c3f; --clm-primary-hover: #163f2c; --clm-accent: #c9922e; } /* Duchesne / Uinta Basin theme variant. */ [data-clm-region="duchesne"] { --clm-primary: #6b3f1d; --clm-primary-hover: #4d2c14; --clm-accent: #a9762e; } :root { /* --------------------------------------------------------------- Spacing scale (rem-based, 4px baseline at default 16px root) --------------------------------------------------------------- */ --clm-space-1: 0.25rem; /* 4px */ --clm-space-2: 0.5rem; /* 8px */ --clm-space-3: 0.75rem; /* 12px */ --clm-space-4: 1rem; /* 16px */ --clm-space-5: 1.5rem; /* 24px */ --clm-space-6: 2rem; /* 32px */ --clm-space-7: 3rem; /* 48px */ --clm-space-8: 4rem; /* 64px */ /* --------------------------------------------------------------- Touch targets & radius --------------------------------------------------------------- */ --clm-touch-min: 44px; --clm-radius-sm: 6px; --clm-radius: 12px; --clm-radius-lg: 20px; --clm-radius-pill: 999px; /* --------------------------------------------------------------- Elevation --------------------------------------------------------------- */ --clm-shadow-sm: 0 1px 2px rgba(40, 37, 29, 0.06); --clm-shadow-md: 0 4px 16px rgba(40, 37, 29, 0.10); --clm-shadow-lg: 0 12px 32px rgba(40, 37, 29, 0.16); /* --------------------------------------------------------------- Typography — font stacks --------------------------------------------------------------- */ --clm-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --clm-font-heading: "Fraunces", Georgia, "Times New Roman", serif; /* --------------------------------------------------------------- Fluid typography scale — clamp(min, preferred, max) Baseline viewport 375px -> max viewport ~1280px. --------------------------------------------------------------- */ --clm-fs-caption: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --clm-fs-body-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); --clm-fs-body: clamp(1rem, 0.94rem + 0.3vw, 1.125rem); --clm-fs-body-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); --clm-fs-h6: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --clm-fs-h5: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); --clm-fs-h4: clamp(1.3rem, 1.15rem + 0.75vw, 1.75rem); --clm-fs-h3: clamp(1.5rem, 1.25rem + 1.25vw, 2.125rem); --clm-fs-h2: clamp(1.625rem, 1.25rem + 1.9vw, 2.75rem); --clm-fs-h1: clamp(1.75rem, 1.2rem + 2.75vw, 3.5rem); --clm-lh-tight: 1.15; --clm-lh-heading: 1.25; --clm-lh-body: 1.55; /* --------------------------------------------------------------- Breakpoints (reference only — CSS can't read these as vars in @media queries, but documented here as the canonical scale). 375 -> 640 -> 768 -> 1024 -> 1280 --------------------------------------------------------------- */ /* --------------------------------------------------------------- Z-index scale --------------------------------------------------------------- */ --clm-z-dropdown: 40; --clm-z-sticky: 50; --clm-z-ad-sticky: 60; --clm-z-drawer: 80; --clm-z-modal: 100; --clm-z-toast: 110; /* --------------------------------------------------------------- Motion --------------------------------------------------------------- */ --clm-duration-fast: 150ms; --clm-duration-base: 250ms; --clm-duration-slow: 400ms; --clm-ease: cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-color-scheme: dark) { /* Reserved for future dark-mode token overrides. Intentionally left as light-mode only for v1 — CLM sites do not yet support dark mode. */ }