/* ========================================================================== CraftNest — Design tokens Screen 01 / Foundations. Nine colour tokens, four families, one spacing scale. Nothing in the theme may hardcode a hex value that is not here. The rule held everywhere except one role it had no name for. Sixty places wrote #fff by hand for the label on a filled button, the knob of a toggle, the spinner on a loading control -- all of them "light thing on a saturated or dark ground", none of them the page background. --cn-paper was the wrong token to reach for (repaint the page dark and the button label has to stay light, not follow it) so the writers reached for nothing, and the rule quietly became untrue. --cn-on-fill is that missing name. Two things still carry raw hex, on purpose and not by oversight: - the mask-image gradients on the marquee, where #000 is an alpha stop and not a colour anybody sees; - the @media print block, where the ground really is white paper and the ink really is black, whatever the screen palette says. Anything else with a hex in it is a bug against this file. ========================================================================== */ :root { /* --- Colour, the nine tokens ------------------------------------------ */ --cn-ink: #0E1116; /* primary text, dark bands */ --cn-graphite: #4A5058; /* secondary text, meta */ --cn-paper: #FFFFFF; /* page and card base */ --cn-surface: #F6F5F2; /* warm section background */ --cn-line: #E4E2DD; /* hairline borders */ --cn-line-strong: #969490; /* form boundaries: 3.03:1 on paper, WCAG 1.4.11 */ --cn-line-on-ink: rgba(255,255,255,.38); /* 3.01:1 on the ink band */ --cn-accent: #1F5EFF; /* actions and links */ --cn-accent-dark: #1745C4; /* hover and pressed */ --cn-warm: #FF7A2F; /* free, sale, discounts only */ --cn-success: #12855A; /* savings, verified */ /* --- Derived values --------------------------------------------------- Warm on white uses the darkened value so text clears 4.5:1. Fills keep the bright value. Never swap these two around. */ --cn-warm-text: #C2470A; /* warm as text on paper/surface */ /* Success as text on its own pale tint. --cn-success itself only reaches 4.08:1 there, under AA; this clears it at 5.75:1. Same job --cn-warm-text does for warm, and it needs the same discipline: fill keeps the bright value, text takes the darkened one. */ --cn-success-text: #0E6B49; /* success as text on success-a10 */ --cn-success-ink: #4ADE9C; /* success as text on ink */ --cn-accent-soft: #7FA5FF; /* eyebrow on ink */ --cn-accent-pale: #B9CDFF; /* badge text on ink */ --cn-muted: #A7A6A2; /* disabled label */ /* --- Roles that are not the page ------------------------------------- Text, icons and knobs that sit ON a saturated or dark fill. This is not --cn-paper wearing another hat: paper is the ground a page is drawn on, and a shop that repaints the ground still wants the label on its blue button to be light. Keeping them apart is what lets the palette move. */ --cn-on-fill: #FFFFFF; /* on accent, ink, warm, success fills */ --cn-ink-pressed: #000000; /* one step past ink, for a held button */ --cn-disabled-line:#C6C4BF; /* disabled control border / arrow */ /* Placeholder surfaces used where a real image has not been set yet. */ --cn-preview: #EDEBE7; --cn-preview-alt: #E7E4DE; --cn-preview-warm: #F7E7DC; --cn-ink-100: #1A1E25; --cn-ink-200: #20252D; --cn-ink-300: #262C35; /* Alpha helpers. Kept as tokens so a single edit restyles every tint. */ --cn-accent-a08: rgba( 31, 94, 255, .08); --cn-accent-a10: rgba( 31, 94, 255, .10); --cn-accent-a15: rgba( 31, 94, 255, .15); --cn-accent-a16: rgba( 31, 94, 255, .16); --cn-accent-a22: rgba( 31, 94, 255, .22); --cn-warm-a10: rgba(255, 122, 47, .10); --cn-warm-a16: rgba(255, 122, 47, .16); --cn-warm-a30: rgba(255, 122, 47, .30); --cn-warm-a35: rgba(255, 122, 47, .35); --cn-success-a10: rgba( 18, 133, 90, .10); --cn-success-a12: rgba( 18, 133, 90, .12); --cn-success-a22: rgba( 18, 133, 90, .22); --cn-ink-a05: rgba( 14, 17, 22, .05); --cn-ink-a06: rgba( 14, 17, 22, .06); --cn-ink-a08: rgba( 14, 17, 22, .08); --cn-ink-a35: rgba( 14, 17, 22, .35); --cn-ink-a60: rgba( 14, 17, 22, .60); --cn-ink-a92: rgba( 14, 17, 22, .92); --cn-white-a06: rgba(255, 255, 255, .06); --cn-white-a08: rgba(255, 255, 255, .08); --cn-white-a16: rgba(255, 255, 255, .16); --cn-white-a18: rgba(255, 255, 255, .18); --cn-white-a20: rgba(255, 255, 255, .20); --cn-white-a30: rgba(255, 255, 255, .30); --cn-white-a55: rgba(255, 255, 255, .55); --cn-white-a60: rgba(255, 255, 255, .60); --cn-white-a72: rgba(255, 255, 255, .72); --cn-white-a80: rgba(255, 255, 255, .80); --cn-white-a90: rgba(255, 255, 255, .90); --cn-white-a92: rgba(255, 255, 255, .92); /* --- Typography, four families with strict roles ---------------------- */ --cn-font-display: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --cn-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --cn-font-badge: 'Fredoka', system-ui, sans-serif; /* badges only */ --cn-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Scale, exactly the ten steps on the specimen sheet */ --cn-fs-12: 12px; --cn-fs-14: 14px; --cn-fs-16: 16px; --cn-fs-18: 18px; --cn-fs-20: 20px; --cn-fs-24: 24px; --cn-fs-32: 32px; --cn-fs-44: 44px; --cn-fs-60: 60px; --cn-fs-76: 76px; --cn-lh-tight: 1.02; /* 76px display */ --cn-lh-head: 1.1; /* 44px */ --cn-lh-title: 1.25; /* 24px */ --cn-lh-body: 1.6; /* 16px base */ --cn-lh-mono: 2; /* stacked mono meta */ --cn-track-tight: -0.02em; /* applied above 32px */ --cn-track-mono: 0.06em; /* every mono run */ /* --- Spacing ----------------------------------------------------------- */ --cn-space-1: 4px; --cn-space-2: 8px; --cn-space-3: 12px; --cn-space-4: 16px; --cn-space-5: 20px; --cn-space-6: 24px; --cn-space-8: 32px; --cn-space-10: 40px; --cn-space-12: 48px; --cn-space-16: 64px; --cn-space-24: 96px; /* Section rhythm. 96 on desktop, 56 from the tablet breakpoint down. */ --cn-section: 96px; --cn-gutter: 24px; --cn-max: 1280px; --cn-read: 680px; /* article measure */ /* --- Radius ------------------------------------------------------------ */ --cn-radius-card: 4px; --cn-radius-button: 6px; --cn-radius-badge: 999px; --cn-radius-sheet: 12px; /* bottom sheet top corners */ /* --- Control sizing ---------------------------------------------------- */ --cn-tap: 44px; /* absolute minimum on anything interactive */ --cn-control: 48px; /* buttons and inputs */ --cn-control-l:52px; /* primary buy actions */ /* * The bar is 72px because that is what the navigation needs, and taller * when a bigger logo needs more. Defined here rather than as a min-height * on the bar itself because sticky elements further down the page offset * themselves by this token: change one and not the other and the category * rail parks itself underneath the header. */ --cn-logo-scale: 1; --cn-header: max(72px, calc(36px * var(--cn-logo-scale) + 24px)); /* --- Elevation. Hairlines first, shadow only on hover and sticky ------- */ --cn-shadow-hover: 0 10px 28px rgba(14, 17, 22, .10); --cn-shadow-card: 0 12px 28px rgba(14, 17, 22, .10); --cn-shadow-pop: 0 12px 32px rgba(14, 17, 22, .12); --cn-shadow-menu: 0 16px 40px rgba(14, 17, 22, .10); --cn-shadow-drop: 0 8px 24px rgba(14, 17, 22, .08); --cn-shadow-toast: 0 12px 32px rgba(14, 17, 22, .18); --cn-shadow-sticky: 0 -8px 24px rgba(14, 17, 22, .06); --cn-shadow-sheet: 0 -12px 32px rgba(14, 17, 22, .14); --cn-shadow-drawer: -12px 0 40px rgba(14, 17, 22, .16); --cn-shadow-arrow: 0 4px 14px rgba(14, 17, 22, .08); --cn-ring: 0 0 0 3px var(--cn-accent-a15); /* --- Motion. 150ms ease out everywhere, no parallax -------------------- */ --cn-ease: 150ms ease-out; /* --- Blueprint grid motif ---------------------------------------------- */ --cn-grid-size: 32px; --cn-grid-line: var(--cn-white-a08); /* --- Layering ---------------------------------------------------------- */ --cn-z-sticky-nav: 30; --cn-z-header: 40; --cn-z-dropdown: 50; --cn-z-lightbox: 100; --cn-z-modal: 110; --cn-z-toast: 120; } /* Tablet and below: section padding steps down from 96 to 56. */ @media (max-width: 900px) { :root { --cn-section: 56px; } }