/* ============================================== T'ART MAGAZINE — CSS Design Tokens v1.0 · Tacoma, WA · 2026 ---------------------------------------------- HOW TO USE: Add this line at the TOP of every .css file: @import url('tart-variables.css'); Or add this inside every tag: Then use variables like: color: var(--color-red); font-family: var(--font-display); ============================================== */ /* --- GOOGLE FONTS IMPORT --- */ @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;700;800;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Barlow:wght@400;500;600;700;800&display=swap'); :root { /* ============================================ COLORS ============================================ */ /* Brand Red */ --color-red: #C41A28; /* Primary — headlines, sections, bubbles */ --color-red-dark: #9E1420; /* Hover state on red elements */ --color-red-light: #E8243A; /* Active / accent variant */ /* Neutral */ --color-black: #0D0D0D; /* Text, borders, hard shadows */ --color-white: #FFFFFF; --color-gray-100: #F5F4F0; /* Page background */ --color-gray-200: #E8E6E0; /* Dividers, borders */ --color-gray-400: #B0ACA4; /* Disabled / placeholder */ --color-gray-600: #6B6760; /* Secondary text */ --color-gray-800: #2E2C29; /* Dark surfaces, footer */ /* Accent */ --color-teal: #00C8D4; /* Subscribe button, accent CTA */ --color-teal-dark: #009EA8; /* Teal hover state */ /* ============================================ TYPOGRAPHY ============================================ */ --font-display: 'Big Shoulders Display', Impact, sans-serif; --font-mono: 'Space Mono', 'Courier New', monospace; --font-body: 'Barlow', Arial, sans-serif; /* ============================================ TYPE SCALE ============================================ */ --text-xs: 0.75rem; /* 12px — labels, captions, tags */ --text-sm: 0.875rem; /* 14px — meta, dates */ --text-base: 1rem; /* 16px — body copy */ --text-lg: 1.25rem; /* 20px — intro text */ --text-xl: 1.5rem; /* 24px — sub-headings */ --text-2xl: 2rem; /* 32px — section headings */ --text-3xl: 3rem; /* 48px — article titles */ --text-4xl: 4rem; /* 64px — page hero */ --text-5xl: 6rem; /* 96px — large hero */ --text-hero: 10rem; /* 160px — logo / splash */ /* ============================================ LETTER SPACING ============================================ */ --tracking-tight: -0.02em; /* Display headlines */ --tracking-normal: 0em; --tracking-wide: 0.08em; /* Buttons, nav */ --tracking-wider: 0.12em; --tracking-widest: 0.2em; /* Labels, eyebrows */ /* ============================================ LINE HEIGHT ============================================ */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.7; /* ============================================ SPACING ============================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px; --space-48: 192px; /* ============================================ BORDER RADIUS ============================================ */ --radius-none: 0px; /* Sharp industrial edges */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; /* Orbital nav bubbles */ /* ============================================ SHADOWS (hard offset — editorial style) ============================================ */ --shadow-sm: 2px 2px 0px var(--color-black); --shadow-md: 4px 4px 0px var(--color-black); --shadow-lg: 6px 6px 0px var(--color-black); --shadow-red: 4px 4px 0px var(--color-red-dark); --shadow-glow: 0 0 32px rgba(196, 26, 40, 0.35); /* Red glow for hero elements */ /* ============================================ Z-INDEX ============================================ */ --z-base: 0; --z-above: 10; --z-overlay: 100; --z-nav: 200; --z-modal: 300; --z-toast: 400; /* ============================================ MOTION / ANIMATION ============================================ */ /* Easing curves */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Generic transitions */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* Entering elements */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* Exiting elements */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Orbital bubbles, hover */ --ease-snap: cubic-bezier(0.16, 1, 0.3, 1); /* Quick snappy movements */ /* Durations */ --duration-instant: 50ms; /* Micro-interactions */ --duration-fast: 150ms; /* Button hover, color change */ --duration-base: 300ms; /* Most UI transitions */ --duration-slow: 600ms; /* Page section reveals */ --duration-xslow: 1200ms; /* Hero animations, orbit loops */ --duration-crawl: 2400ms; /* Continuous orbit motion */ /* ============================================ LAYOUT ============================================ */ --max-width: 1200px; /* Site max-width */ --gutter: 32px; /* Page side padding (desktop) */ --gutter-mobile: 16px; /* Page side padding (mobile) */ --nav-height: 72px; /* Fixed navbar height */ } /* ============================================== UTILITY CLASSES ------------------------------------------ Optional helpers — use in HTML as class="" ============================================== */ /* Fonts */ .font-display { font-family: var(--font-display); } .font-mono { font-family: var(--font-mono); } .font-body { font-family: var(--font-body); } /* Colors */ .text-red { color: var(--color-red); } .text-white { color: var(--color-white); } .text-black { color: var(--color-black); } .text-gray { color: var(--color-gray-600); } .bg-red { background-color: var(--color-red); } .bg-black { background-color: var(--color-black); } .bg-white { background-color: var(--color-white); } .bg-gray { background-color: var(--color-gray-100); } /* Text transforms */ .uppercase { text-transform: uppercase; } .tracking-wide { letter-spacing: var(--tracking-wide); } .tracking-widest { letter-spacing: var(--tracking-widest); } /* Transitions */ .transition-base { transition: all var(--duration-base) var(--ease-in-out); } .transition-bounce { transition: all var(--duration-base) var(--ease-bounce); }