/* ========================================================================== DOE & CO. — DESIGN TOKENS Gate A · v0.1 · Provisional, pending approval -------------------------------------------------------------------------- Contrast ratios noted inline are measured, not estimated. Target: WCAG 2.2 AA (4.5:1 body text, 3:1 large text & UI boundaries). RULE: the five pastels are ATMOSPHERE. They never carry text on a light surface. Their -strong siblings exist for that. See §Accent. ========================================================================== */ :root { /* ---- CORE PALETTE ---------------------------------------------------- */ /* Values marked (sampled) were pulled pixel-by-pixel from the mood-board artwork Lindsay approved, not estimated from the brief's provisional table. */ --dc-ink: #102B69; /* (sampled) wordmark · primary dark · 12.87:1 AAA */ --dc-rose: #AE6386; /* (sampled) ampersand · 4.10:1 — LARGE TEXT ONLY */ --dc-rose-strong: #A05A7C; /* 4.76:1 AA — rose at body size */ --dc-lilac: #CBBEE6; /* (sampled) crystal interior */ --dc-snow-warm: #F8EAEA; /* (sampled) the artwork's warm background */ --dc-snow: #FCFAFD; /* cool primary background — product pages */ --dc-moonlight: #EEF3FA; /* cool secondary background */ --dc-blush: #E9B9CE; /* (sampled) warm accent — fills only */ --dc-ice: #C7DDEC; /* cool accent — fills only */ --dc-lavender: #B9A7D9; /* signature pastel — fills only */ --dc-navy: var(--dc-ink); /* alias — retained so existing refs keep working */ --dc-navy-deep: #1B2A4A; /* alt wordmark navy — awaiting decision */ --dc-gold: #C8A96B; /* metallic accent — fills/rules only */ --dc-ink-hover: #0B1F4F; /* ink darkened for button hover */ --dc-bg-flag: #FBF2E4; /* "to be confirmed" marker ground */ /* ---- ACCENT · TEXT-SAFE SIBLINGS ------------------------------------- */ /* Same hue family, darkened only as far as AA requires. Use these any time an accent colour must carry text, an icon that conveys meaning, or a focus ring on a light background. */ --dc-lavender-strong: #6B5A9E; /* 5.65:1 on snow AA */ --dc-blush-strong: #8A4463; /* 6.55:1 on snow AA */ --dc-gold-strong: #7A6129; /* 5.67:1 on snow AA */ --dc-ice-strong: #2F5A75; /* 7.12:1 on snow AAA */ /* ---- JEWEL ACCENTS ---------------------------------------------------- */ /* Product-led moments only. Never UI chrome. Never body text. */ --dc-jewel-amethyst: #7C5BA6; --dc-jewel-sapphire: #2E4B7A; --dc-jewel-garnet: #7B2C3E; --dc-jewel-emerald: #2C5C4A; /* ---- SEMANTIC · SURFACE ---------------------------------------------- */ --dc-bg-default: var(--dc-snow); --dc-bg-soft: var(--dc-moonlight); --dc-bg-inverse: var(--dc-ink); --dc-bg-hero: var(--dc-snow-warm); --dc-bg-blush: #F7EDF2; /* 8% blush over snow — section bands */ --dc-bg-ice: #EDF5FA; /* 8% ice over snow */ --dc-bg-lavender: #F1EDF8; /* 8% lavender over snow */ /* ---- SEMANTIC · TEXT -------------------------------------------------- */ --dc-text-primary: var(--dc-ink); /* 12.87:1 AAA */ --dc-text-muted: #54607A; /* 6.07:1 AA */ --dc-text-inverse: var(--dc-snow); /* 12.41:1 on navy AAA */ --dc-text-inverse-mu: #C3CCDC; /* 7.9:1 on navy AAA */ --dc-text-link: var(--dc-lavender-strong); --dc-text-price: var(--dc-navy); /* ---- SEMANTIC · LINE -------------------------------------------------- */ --dc-line-hairline: #E4E1EA; /* decorative rules, card edges */ --dc-line-default: #C9C6D4; /* 3.0:1 — form field borders */ --dc-line-strong: var(--dc-navy); --dc-line-gold: var(--dc-gold); /* ---- SEMANTIC · STATUS ------------------------------------------------ */ --dc-success: #3C6B52; /* 5.92:1 AA */ --dc-error: #9B3B3B; /* 6.56:1 AA */ --dc-focus: var(--dc-lavender-strong); /* ---- TYPOGRAPHY · FAMILIES ------------------------------------------- */ /* All SIL OFL 1.1 — free for web AND print, embeddable, no licence to clear. NOTE: the artwork's accent line is an ITALIC SERIF, not a cursive script. The earlier --dc-font-script spec was wrong and is retired. */ --dc-font-display: "Cormorant SC", "Cormorant Garamond", Georgia, serif; --dc-font-heading: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --dc-font-body: "Inter", -apple-system, "Segoe UI", Helvetica, sans-serif; --dc-font-accent: "Cormorant Garamond", "EB Garamond", Georgia, serif; /* set in italic */ --dc-font-numeral: "Inter", ui-monospace, sans-serif; /* ---- TYPOGRAPHY · SCALE ---------------------------------------------- */ /* Fluid where it earns it; fixed where precision matters. */ --dc-type-display: clamp(2.75rem, 1.6rem + 4.2vw, 5.5rem); /* 44→88 */ --dc-type-h1: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); /* 32→52 */ --dc-type-h2: clamp(1.625rem, 1.25rem + 1.5vw, 2.5rem); /* 26→40 */ --dc-type-h3: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); --dc-type-h4: 1.25rem; --dc-type-h5: 1.0625rem; --dc-type-h6: 0.9375rem; --dc-type-eyebrow: 0.75rem; --dc-type-body-lg: 1.125rem; --dc-type-body: 1rem; /* 16px floor. Never smaller for prose. */ --dc-type-caption: 0.8125rem; --dc-type-price: 1.125rem; --dc-type-button: 0.9375rem; --dc-type-accent: clamp(1.05rem, .9rem + 1.1vw, 1.85rem); /* italic serif line */ /* ---- TYPOGRAPHY · WEIGHT / SPACING / LEADING ------------------------- */ --dc-weight-light: 300; --dc-weight-regular: 400; --dc-weight-medium: 500; --dc-weight-semi: 600; --dc-track-display: 0.02em; --dc-track-eyebrow: 0.22em; /* the letterspaced small-cap device */ --dc-track-subline: 0.42em; /* NORTHERN WHIMSY under the wordmark */ --dc-track-button: 0.06em; --dc-track-body: 0; --dc-leading-tight: 1.08; --dc-leading-snug: 1.25; --dc-leading-normal: 1.6; --dc-leading-relaxed: 1.75; /* ---- SPACING ---------------------------------------------------------- */ --dc-space-1: 4px; --dc-space-2: 8px; --dc-space-3: 12px; --dc-space-4: 16px; --dc-space-5: 24px; --dc-space-6: 32px; --dc-space-7: 48px; --dc-space-8: 64px; --dc-space-9: 96px; --dc-space-10: 144px; /* editorial section rhythm — the luxury lever */ /* ---- RADIUS ----------------------------------------------------------- */ /* Deliberately restrained. Bubbly radii read as consumer-app, not boutique. */ --dc-radius-xs: 2px; --dc-radius-sm: 4px; --dc-radius-md: 8px; --dc-radius-lg: 16px; --dc-radius-pill: 999px; /* tags and badges ONLY */ /* ---- SHADOW ----------------------------------------------------------- */ /* Cool-toned, low-opacity. Never a grey drop shadow. */ --dc-shadow-none: none; --dc-shadow-soft: 0 1px 2px rgba(16,43,105,.04), 0 4px 12px rgba(16,43,105,.05); --dc-shadow-lift: 0 2px 4px rgba(16,43,105,.05), 0 12px 28px rgba(16,43,105,.08); --dc-shadow-modal: 0 8px 16px rgba(16,43,105,.08), 0 32px 64px rgba(16,43,105,.12); /* ---- MOTION ----------------------------------------------------------- */ --dc-dur-fast: 150ms; --dc-dur-base: 200ms; --dc-dur-slow: 300ms; --dc-ease-out: cubic-bezier(.22,.61,.36,1); --dc-ease-inout: cubic-bezier(.45,.05,.55,.95); /* ---- LAYOUT ----------------------------------------------------------- */ --dc-container: 1280px; --dc-container-text: 68ch; /* editorial measure */ --dc-gutter-desktop: 48px; --dc-gutter-tablet: 32px; --dc-gutter-mobile: 20px; --dc-cols-desktop: 12; --dc-cols-tablet: 8; --dc-cols-mobile: 4; /* ---- TOUCH ------------------------------------------------------------ */ --dc-touch-min: 44px; /* WCAG 2.2 AA target size */ } /* ---- MOTION SAFETY ------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --dc-dur-fast: 0ms; --dc-dur-base: 0ms; --dc-dur-slow: 0ms; } } /* ---- FOCUS -------------------------------------------------------------- */ /* Always visible. Never removed. Never a pastel on a light surface. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--dc-focus); outline-offset: 2px; border-radius: var(--dc-radius-xs); }