/* =================================================================== iCookMagic -- Design Tokens (v1) =================================================================== The single source of truth for the entire site. Every color, size, spacing value, shadow, and animation lives here. Rule: NO component should ever use a raw value (like "12px" or "#FF3D7F"). They must reference a token below. This is what makes the site feel cohesive instead of cobbled together. Load order: tokens.css -> base.css -> components -> page styles Location: /assets/css/tokens.css =================================================================== */ :root { /* ----------------------------------------------------------------- 1. COLOR ----------------------------------------------------------------- Three brand colors + neutrals. That's it. If you find yourself wanting a 4th brand color, the answer is no. ----------------------------------------------------------------- */ /* Brand -- the iCookMagic identity */ --color-magenta: #FF3D7F; /* primary action, emphasis, italics */ --color-magenta-dark: #D9266A; /* hover state for magenta */ --color-magenta-soft: #FF8FB3; /* tints, partner accent */ --color-magenta-tint: #FFE5EE; /* backgrounds, soft fills */ --color-neon: #39FF14; /* highlights, "free" callouts, energy */ --color-neon-dark: #2BD60D; /* hover state for neon */ --color-black: #000000; /* primary text, header, dark sections */ --color-white: #FFFFFF; /* surfaces, light sections */ /* Neutrals -- grayscale built from black so it never feels "cold" */ --color-ink-900: #0A0A0A; /* near-black body text */ --color-ink-700: #2A2A2A; /* secondary text on light */ --color-ink-500: #6B6B6B; /* tertiary text, captions */ --color-ink-300: #B8B8B8; /* disabled text */ --color-ink-100: #EDEDED; /* borders, dividers */ --color-ink-50: #F7F7F7; /* subtle backgrounds */ /* Alpha -- semi-transparent overlays. Use over dark surfaces. */ --color-white-90: rgba(255,255,255,.90); --color-white-70: rgba(255,255,255,.70); --color-white-50: rgba(255,255,255,.50); --color-white-15: rgba(255,255,255,.15); --color-white-08: rgba(255,255,255,.08); --color-black-90: rgba(0,0,0,.90); --color-black-60: rgba(0,0,0,.60); --color-black-30: rgba(0,0,0,.30); --color-black-10: rgba(0,0,0,.10); /* Semantic -- for feedback states */ --color-success: #10B981; --color-warning: #F59E0B; --color-error: #EF4444; --color-info: #3B82F6; /* ----------------------------------------------------------------- 2. TYPOGRAPHY ----------------------------------------------------------------- Two families. Five sizes. That's enough for a world-class site. The scale uses a 1.25 (major third) ratio -- proven, readable. ----------------------------------------------------------------- */ /* Font families */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace; /* Type scale -- use these and ONLY these */ --text-xs: 12px; /* captions, micro-labels, legal */ --text-sm: 14px; /* body small, secondary UI */ --text-base: 16px; /* body default -- never go below this for paragraphs */ --text-lg: 20px; /* lead paragraphs, large body */ --text-xl: 24px; /* h4 / small headings */ --text-2xl: 32px; /* h3 */ --text-3xl: 44px; /* h2 */ --text-4xl: 60px; /* h1 -- hero */ --text-5xl: 80px; /* display -- used sparingly */ /* Line heights -- paired with sizes */ --leading-tight: 1.05; /* large display headings */ --leading-snug: 1.2; /* headings */ --leading-normal: 1.5; /* body text */ --leading-relaxed: 1.65; /* long-form reading */ /* Letter spacing -- used purposefully, not decoratively */ --tracking-tighter: -0.03em; /* large display only */ --tracking-tight: -0.015em; /* headings */ --tracking-normal: 0; /* body */ --tracking-wide: 0.04em; /* small caps */ --tracking-wider: 0.12em; /* eyebrow labels, tags */ --tracking-widest: 0.2em; /* tiny all-caps labels */ /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* ----------------------------------------------------------------- 3. SPACING ----------------------------------------------------------------- Based on a 4px grid. Every margin, padding, and gap uses these. This is what creates visual rhythm -- the single biggest factor in whether a site feels "designed" or "thrown together." ----------------------------------------------------------------- */ --space-0: 0; --space-1: 4px; /* hairline gaps */ --space-2: 8px; /* tight spacing inside components */ --space-3: 12px; /* default small */ --space-4: 16px; /* default -- most common value */ --space-5: 20px; --space-6: 24px; /* section internals */ --space-8: 32px; /* between elements */ --space-10: 40px; --space-12: 48px; /* between sub-sections */ --space-16: 64px; /* between sections */ --space-20: 80px; /* major section breaks */ --space-24: 96px; /* hero / landmark spacing */ --space-32: 128px; /* maximum -- almost never needed */ /* ----------------------------------------------------------------- 4. RADIUS ----------------------------------------------------------------- Four values. Pick the one that matches the component's "weight." ----------------------------------------------------------------- */ --radius-none: 0; --radius-sm: 4px; /* buttons, inputs, tags */ --radius-md: 8px; /* cards, modals, content blocks */ --radius-lg: 16px; /* large surfaces, feature cards */ --radius-full: 9999px; /* pills, avatars, circular buttons */ /* ----------------------------------------------------------------- 5. SHADOWS ----------------------------------------------------------------- Two systems for two moods: -- Soft: standard depth for UI (cards, dropdowns, modals) -- Hard: the iCookMagic signature offset shadow (zine/editorial) ----------------------------------------------------------------- */ /* Soft shadows -- for floating UI */ --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04); --shadow-md: 0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04); --shadow-lg: 0 12px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06); --shadow-xl: 0 24px 48px rgba(0,0,0,.14), 0 8px 16px rgba(0,0,0,.08); /* Hard offset shadows -- iCookMagic's signature look */ --shadow-offset-sm: 4px 4px 0 var(--color-black); --shadow-offset-md: 8px 8px 0 var(--color-black); --shadow-offset-lg: 12px 12px 0 var(--color-black); --shadow-offset-magenta: 8px 8px 0 var(--color-magenta); --shadow-offset-neon: 8px 8px 0 var(--color-neon); /* Glow shadows -- for CTAs that need to pop */ --shadow-glow-magenta: 0 6px 18px rgba(255,61,127,.4); --shadow-glow-neon: 0 6px 18px rgba(57,255,20,.4); /* ----------------------------------------------------------------- 6. BORDERS ----------------------------------------------------------------- ----------------------------------------------------------------- */ --border-thin: 1px; --border-default: 2px; /* the iCM signature -- bold black borders */ --border-thick: 3px; --border-color-default: var(--color-black); --border-color-subtle: var(--color-ink-100); --border-color-dark: var(--color-white-15); /* on dark surfaces */ /* ----------------------------------------------------------------- 7. MOTION ----------------------------------------------------------------- Restrained, purposeful. Animation is salt -- too much ruins it. ----------------------------------------------------------------- */ --duration-instant: 100ms; /* micro-feedback (button press) */ --duration-fast: 180ms; /* hover states, color changes */ --duration-base: 240ms; /* default -- most transitions */ --duration-slow: 400ms; /* layout shifts, panel opens */ --duration-slower: 600ms; /* hero animations, page enter */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* default -- decelerating */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* symmetric transitions */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot */ /* ----------------------------------------------------------------- 8. LAYOUT ----------------------------------------------------------------- ----------------------------------------------------------------- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; /* default site container */ --container-2xl: 1440px; /* extra-wide for hero only */ --container-pad: 28px; /* desktop horizontal padding */ --container-pad-mobile: 18px; /* mobile horizontal padding */ /* ----------------------------------------------------------------- 9. Z-INDEX ----------------------------------------------------------------- Named layers so we never play z-index whack-a-mole. ----------------------------------------------------------------- */ --z-base: 1; --z-raised: 10; /* cards on hover, dropdowns within content */ --z-sticky: 100; /* sticky elements */ --z-header: 200; /* the sitewide header */ --z-drawer: 300; /* mobile nav drawer */ --z-modal: 1000; /* modals, dialogs */ --z-toast: 2000; /* notifications, snackbars */ --z-tooltip: 3000; /* tooltips */ /* ----------------------------------------------------------------- 10. BREAKPOINTS (reference only -- CSS variables can't power @media queries, but documenting them here keeps everything in one place. Use these EXACT values in your media queries.) ----------------------------------------------------------------- --bp-sm: 640px (large phone / small tablet) --bp-md: 768px (tablet) --bp-lg: 1024px (small laptop) --bp-xl: 1280px (desktop) --bp-2xl: 1536px (large desktop) ----------------------------------------------------------------- */ } /* =================================================================== USAGE EXAMPLES -- delete these comments once you're comfortable. =================================================================== [X] BAD: .my-card { padding: 18px; font-size: 13.5px; color: #2A2A2A; border-radius: 6px; box-shadow: 0 5px 10px rgba(0,0,0,.1); } [OK] GOOD: .my-card { padding: var(--space-5); font-size: var(--text-sm); color: var(--color-ink-700); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } The "bad" version works but locks you into pixel decisions made in a hurry. The "good" version lets you change the entire site's feel by editing this one file. =================================================================== */