/* ============================================================ * tokens.css — The Black Rose Zine Design Tokens * ============================================================ * * Every color, every measurement, every timing lives here. * Change this file and the whole zine shifts. * * Phase 1: Art-School Warmth * A zine you found in a shoebox in someone's studio apartment. * Coffee-stained. Loved. * * ============================================================ */ :root { /* ----------------------------------------------------------- * Color Palette — Phase 1: Art-School Warmth * * Warm paper. Near-black ink. Brown like notebook leather. * Nothing pure. Nothing cold. Nothing rendered. * ----------------------------------------------------------- */ /* Core surfaces */ --color-bg: #faf8f6; /* warm paper */ --color-bg-soft: #f5f0eb; /* scrapbook section, evidence bg */ --color-bg-inverse: #2c2c2c; /* dark surface (rare in Phase 1) */ /* Text */ --color-text: #2c2c2c; /* near-black — never pure #000 */ --color-text-muted: #6b6560; /* secondary, captions, hints */ --color-text-inverse: #faf8f6; /* text on dark surfaces */ /* Accent — warm brown is THE color */ --color-accent: #8B7355; /* warm brown — notebook leather */ --color-accent-light: #b8a690; /* borders, subtle elements */ --color-accent-dark: #5c4d3a; /* hover, active states */ /* Functional: locked content */ --color-lock-overlay: #8B7355cc; /* redaction bars — brown + alpha */ --color-lock-blur-bg: #faf8f680; /* behind blurred content */ --color-unlock-glow: #8B735520; /* momentary unlock highlight */ /* Surfaces & components */ --color-code-bg: #f5f0eb; /* code block background */ --color-code-border: #8B7355; /* warm brown left border on code */ --color-card-shadow: #2c2c2c10; /* artifact drop shadows */ --color-input-border: #b8a690; /* form field border */ --color-focus-ring: #8B7355; /* focus state outline */ /* ----------------------------------------------------------- * Typography — Fluid Scale * * clamp(min, preferred, max) for fluid sizing. * Base: 1rem = 16px. Everything relative. * * Caveat: handwritten, page titles, nav tabs * Literata: body, prose, the reading experience * IBM Plex Mono: code blocks, data, terminal * Inter: UI chrome, buttons, labels — it disappears * ----------------------------------------------------------- */ /* Font families */ --font-handwritten: 'Caveat', cursive; --font-body: 'Literata', Georgia, serif; --font-mono: 'IBM Plex Mono', Consolas, monospace; --font-ui: 'Inter', system-ui, sans-serif; /* Type scale — fluid with clamp() */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem); /* ~12-13px */ --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem); /* ~13-14px */ --text-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1.0625rem); /* ~15-17px */ --text-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); /* ~17-20px */ --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); /* ~20-24px */ --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem); /* ~24-32px */ --text-3xl: clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem); /* ~28-40px */ --text-4xl: clamp(2rem, 1.5rem + 2.5vw, 3rem); /* ~32-48px */ --text-5xl: clamp(2.5rem, 2rem + 3vw, 4rem); /* ~40-64px */ /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.75; /* Font weights */ --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; /* Letter spacing */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.05em; /* ----------------------------------------------------------- * Spacing Scale * * Base unit: 0.25rem (4px at 16px root). * No magic numbers. No px. Ever. * ----------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ----------------------------------------------------------- * Border Radius * * Soft corners. Nothing pill-shaped. * Like worn paper edges, not glass buttons. * ----------------------------------------------------------- */ --radius-sm: 0.1875rem; /* 3px — barely there */ --radius-md: 0.375rem; /* 6px — default */ --radius-lg: 0.625rem; /* 10px — cards, evidence */ --radius-xl: 1rem; /* 16px — modal, lock screen */ --radius-full: 62.4375rem; /* pill — used sparingly */ /* ----------------------------------------------------------- * Shadows * * Layered paper. Things sit on top of other things. * Warm, not cold. Brown-tinted, not blue-gray. * ----------------------------------------------------------- */ --shadow-sm: 0 0.0625rem 0.125rem var(--color-card-shadow); --shadow-md: 0 0.125rem 0.5rem var(--color-card-shadow), 0 0.0625rem 0.1875rem var(--color-card-shadow); --shadow-lg: 0 0.25rem 1rem var(--color-card-shadow), 0 0.125rem 0.375rem var(--color-card-shadow); --shadow-glow: 0 0 1.5rem var(--color-unlock-glow); /* ----------------------------------------------------------- * Transitions & Timing * * Unlock transitions are the reward moment. * Everything else is quick and purposeful. * ----------------------------------------------------------- */ /* General UI transitions */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 400ms; /* Unlock-specific timings — the reveal */ --unlock-dissolve: 600ms; /* paper burn-away */ --unlock-blur-clear: 400ms; /* blur sharpens */ --unlock-blur-delay: 200ms; /* starts after dissolve begins */ --unlock-glow: 1000ms; /* warm glow fades */ --unlock-redact-bar: 300ms; /* single bar erasure */ --unlock-redact-stagger: 50ms; /* delay between bars */ /* Page transition */ --page-transition: 200ms; /* page flip feel */ /* ----------------------------------------------------------- * Z-Index Scale * * Layered paper needs layered z-index. * ----------------------------------------------------------- */ --z-base: 0; --z-artifact: 10; --z-nav: 100; --z-drawer: 200; --z-lock-overlay: 300; --z-modal: 400; --z-toast: 500; /* ----------------------------------------------------------- * Layout Widths * ----------------------------------------------------------- */ --content-max-width: 48rem; /* 768px — the reading column */ --page-padding-mobile: var(--space-4); /* 1rem sides */ --page-padding-tablet: var(--space-6); /* 1.5rem sides */ --page-padding-desktop: var(--space-8); /* 2rem sides */ /* Touch target minimum */ --touch-target-min: 2.75rem; /* 44px — accessibility floor */ } /* ----------------------------------------------------------- * Breakpoint Reference * * CSS custom properties can't be used in @media queries. * These are documented here for reference only. * * Phone: 0 – 37.4375rem (0 – 599px) * Tablet: 37.5rem – 63.9375rem (600px – 1023px) * Desktop: 64rem+ (1024px+) * * Usage in other files: * @media (min-width: 37.5rem) { ... } tablet+ * @media (min-width: 64rem) { ... } desktop+ * * ----------------------------------------------------------- */