/* ============================================================ DESIGN TOKEN CONTRACT (reusable — no client values here) ------------------------------------------------------------ Twelve token groups. Every component in lib/components.css styles itself ONLY through these variables. To re-skin for a new client, copy site/theme.css and change the values there. Never edit lib/ per client. The values below are neutral greyscale defaults so components render sanely before any theme loads. ============================================================ */ :root { /* ---- 1. COLOR ------------------------------------------ Two grounds (paper / ink) so any section can invert. `-metal` is decorative only (>=3:1, per WCAG 1.4.11); `-metal-text` is the text-safe sibling (>=4.5:1). */ --c-paper: #ffffff; /* clean ground */ --c-bone: #f4f3f1; /* warm secondary ground */ --c-smoke: #e6e5e3; /* tertiary ground / fills */ --c-ink: #101010; /* primary text on paper */ --c-ink-2: #3d3d3d; /* secondary text */ --c-ink-3: #6a6a6a; /* muted text (>=4.5:1) */ --c-metal: #9a9a9a; /* decorative accent, non-text */ --c-metal-text: #6f6f6f; /* text-safe accent */ /* Inverted ground (dark sections) */ --c-ink-ground: #121212; /* rich dark ground */ --c-on-ink: #f4f3f1; /* primary text on dark */ --c-on-ink-2: #c9c8c5; /* secondary text on dark */ --c-on-ink-3: #9d9c99; /* muted text on dark (>=4.5) */ --c-metal-on-ink: #b0aeab; /* text-safe accent on dark */ /* Hairlines — the primary structural device */ --c-line: rgba(16, 16, 16, 0.14); --c-line-strong: rgba(16, 16, 16, 0.30); --c-line-on-ink: rgba(244, 243, 241, 0.18); /* Focus ring — must clear 3:1 against both grounds */ --c-focus: #0a58ca; /* Ten-step scale. For a colorist this is a level chart; for any other client it is a decorative brand ramp. */ --level-1: #f2f2f2; --level-2: #dedede; --level-3: #c7c7c7; --level-4: #b0b0b0; --level-5: #999999; --level-6: #7d7d7d; --level-7: #616161; --level-8: #454545; --level-9: #2b2b2b; --level-10: #151515; /* ---- 2. TYPOGRAPHY -------------------------------------- */ --font-display: Georgia, 'Times New Roman', serif; --font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif; /* Fluid scale: min at 375px, max at 1440px */ --t-3xs: 0.6875rem; /* 11px micro-label */ --t-2xs: 0.75rem; /* 12px eyebrow */ --t-xs: 0.8125rem; /* 13px caption */ --t-sm: 0.875rem; /* 14px UI */ --t-base: 1rem; /* 16px body */ --t-md: clamp(1.0625rem, 0.4vw + 0.96rem, 1.1875rem); --t-lg: clamp(1.25rem, 0.7vw + 1.06rem, 1.5rem); --t-xl: clamp(1.5rem, 1.2vw + 1.2rem, 2rem); --t-2xl: clamp(1.875rem, 2vw + 1.35rem, 2.75rem); --t-3xl: clamp(2.25rem, 3.2vw + 1.4rem, 3.75rem); --t-4xl: clamp(2.75rem, 5vw + 1.3rem, 5.5rem); --t-5xl: clamp(3.25rem, 7.4vw + 1rem, 8rem); --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --lh-tight: 1.04; --lh-snug: 1.18; --lh-normal: 1.45; --lh-relaxed:1.68; --tr-tight: -0.02em; --tr-normal: 0; --tr-wide: 0.06em; --tr-label: 0.16em; /* uppercase micro-labels */ /* ---- 3. SPACING ----------------------------------------- */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 56px; --s-11: 64px; --s-12: 80px; --s-13: 96px; --s-14: 120px; /* Section rhythm. Three densities, all fluid. Desktop lands 52-96px, mobile 28-56px. */ --section-y-tight: clamp(28px, 3.6vw, 52px); --section-y: clamp(44px, 5.6vw, 80px); --section-y-loose: clamp(56px, 6.6vw, 96px); /* ---- 4. GRID -------------------------------------------- */ --grid-cols: 12; --grid-gutter: clamp(12px, 1.6vw, 24px); --grid-gap: clamp(2px, 0.3vw, 4px); /* hairline gaps */ /* ---- 5. BORDERS ----------------------------------------- */ --bw-hair: 1px; --bw-thick: 2px; --radius-none: 0; --radius-sm: 2px; /* deliberately near-square */ --radius-pill: 999px; /* reserved for chips only */ /* ---- 6. SHADOWS ----------------------------------------- */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.07); --shadow-panel: -12px 0 40px rgba(0, 0, 0, 0.10); /* ---- 7. MOTION — DURATION ------------------------------- */ --dur-instant: 90ms; --dur-fast: 180ms; --dur-base: 280ms; --dur-slow: 460ms; --dur-curtain: 720ms; /* ---- 8. MOTION — EASING --------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* settle, no overshoot */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-entrance: cubic-bezier(0.16, 1, 0.30, 1); --ease-linear: linear; /* ---- 9. Z-INDEX LAYERS ---------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --z-drawer: 310; --z-skiplink: 400; /* ---- 10. BREAKPOINTS ----------------------------------- Documentation tokens. CSS cannot interpolate variables into @media, so these values are mirrored literally in components.css. Change both together. */ --bp-sm: 375px; /* small phone */ --bp-md: 768px; /* tablet portrait */ --bp-lg: 1024px; /* tablet landscape */ --bp-xl: 1440px; /* desktop */ --bp-2xl: 1920px; /* ultrawide */ /* ---- 11. CONTENT WIDTHS --------------------------------- */ --w-text: 62ch; /* comfortable measure */ --w-narrow: 760px; --w-content: 1180px; --w-wide: 1520px; --w-full: 100%; --page-pad: clamp(20px, 4vw, 56px); /* ---- 12. MEDIA ASPECT RATIOS ---------------------------- */ --ar-square: 1 / 1; --ar-portrait: 4 / 5; --ar-tall: 2 / 3; --ar-landscape: 3 / 2; --ar-wide: 16 / 9; --ar-cinema: 21 / 9; --ar-band: 32 / 9; /* narrow proof / marquee bands */ } /* Reduced motion is a first-class token state: durations collapse to zero everywhere rather than per-component. */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-curtain: 1ms; } }