/* ============================================================ tokens.css — design-token foundation (redesign · P1) ============================================================ LOAD ORDER (see base.html ): fonts.css → tokens.css → style.css → base.css → components/* → page CSS tokens.css loads FIRST so every later layer consumes its custom properties. Page CSS is layout-only and consumes tokens — no raw hex, no magic numbers, no ad-hoc shadows. This file is the ONE place raw values are allowed to live. Everything downstream references var(--token). See docs/redesign/design-language.md. CONVENTIONS - New components live in css/components/.css, `dd-` class prefix. - In CSS, reference assets with RELATIVE url() so hashed-static storage can rewrite them. Never hardcode hashed filenames. GROUPS 1. Color scale (coral/pink + warm neutrals) 2. Semantic color tokens 3. Signature gradients, glow, grain 4. Typography (families, fluid scale, tracking, line-height) 5. Spacing scale (4px base) 6. Radii 7. Elevation (shadows) + blur 8. Z-index scale 9. Motion (durations + easings) 10. Layout (container widths; breakpoint reference) 11. Back-compat aliases (legacy names → new tokens) ============================================================ */ :root { /* ---------------------------------------------------------- 1. COLOR SCALE — fixed brand: warm pink + white. Tints/shades of #FFAAA8 plus a warm peach accent. No dark theme. ---------------------------------------------------------- */ --coral-50: #FFF5F4; /* faintest wash, hover backgrounds */ --coral-100: #FFE3E2; /* dreamy mid-stop, card tints, surfaces */ --coral-200: #FFC9C7; /* borders, chips (old --primary-light) */ --coral-300: #FFAAA8; /* BRAND primary — fills, large elements */ --coral-400: #FF9492; --coral-500: #FF8B88; /* deeper accent (old --primary-dark) */ --coral-600: #F0706D; --coral-700: #CF514E; /* accessible accent on white (large text) */ --coral-800: #A83C39; /* AA body text / links on white */ --coral-900: #7E2C2A; /* Warm neutrals — tinted toward the brand, never cold grey */ --paper: #FFFFFF; /* base canvas */ --paper-2: #FFFBFA; /* faint warm off-white for alternating bands */ --peach-100: #FFEFE2; /* peach gradient stop */ --peach-200: #FFD9C2; /* deeper peach glow stop */ --ink: #1A1A1A; /* primary text */ --ink-soft: #3A302E; /* warm secondary text */ --ink-muted: #7A6F6B; /* warm muted text (replaces cold #666) */ --line: #F4E3E1; /* hairline borders (warm) */ /* ---------------------------------------------------------- 2. SEMANTIC TOKENS — use THESE in components, not the raw scale. ---------------------------------------------------------- */ --bg: var(--paper); --bg-alt: var(--paper-2); /* "light-bg" alternating sections */ --surface: var(--paper); /* cards */ --surface-tint: var(--coral-50); /* inputs, soft panels */ --text: var(--ink); --text-soft: var(--ink-soft); --text-muted: var(--ink-muted); --text-on-coral: #FFFFFF; /* type reversed out of pink */ --accent: var(--coral-300); /* the brand pink */ --accent-strong: var(--coral-500); --link: var(--coral-800); /* AA on white */ --link-hover: var(--coral-600); --border: var(--line); --focus-ring: var(--coral-500); --success: #3FA66A; --danger: #D6453C; /* Warm amber "attention" cue — pending / awaiting-action states that are neither success nor danger. Tuned warm (toward the coral/peach palette, not a cold tailwind amber) so it reads on-brand; AA-large on white and used softened (color-mix) for badge/banner backgrounds. */ --attention: #BC5A18; /* Functional status palette — the dashboard/hub work-lifecycle states (not brand decoration; a semantic signal system shared by hub + staff). Consumed by the hub portal AND the staff list views: P14.2 migrated the staff status rules (jobs.css/projects.css/sessions.css) off raw literals onto these tokens. */ --status-not-booked: #9CA3AF; --status-booked: #6366F1; --status-backlog: #F59E0B; --status-in-progress: #8B5CF6; --status-completed: #10B981; --status-canceled: #EF4444; /* Revision / feedback lifecycle — map onto the work-status hues so the signal language stays consistent. (Session confirmed→booked and no-show→declined are handled in the templates' status_class mapping.) */ --status-not-addressed: var(--status-not-booked); --status-resolved: var(--status-completed); --status-declined: var(--status-canceled); --status-neutral: #6B7280; /* archived / closed grey */ /* Frosted-glass surfaces (navbar) + soft coral borders. Defined raw here so consumers never hand-roll rgba(). */ --glass-bg: rgba(255, 255, 255, 0.85); --glass-bg-strong: rgba(255, 255, 255, 0.98); --glass-border: rgba(255, 170, 168, 0.30); --tint-faint: rgba(255, 170, 168, 0.05); /* faintest coral wash */ --tint-soft: rgba(255, 170, 168, 0.10); /* soft hover wash */ --tint-20: rgba(255, 170, 168, 0.20); /* old --primary-extra-light */ --scrim: rgba(0, 0, 0, 0.40); /* legacy hero photo scrim */ /* ---------------------------------------------------------- 3. SIGNATURE GRADIENTS, GLOW, GRAIN ---------------------------------------------------------- */ --grad-dreamy: linear-gradient(135deg, #FFFFFF 0%, #FFE3E2 52%, #FFD9C2 100%); --grad-soft: linear-gradient(180deg, #FFFBFA 0%, #FFF5F4 100%); --grad-coral: linear-gradient(135deg, #FFAAA8 0%, #FF8B88 100%); /* pink CTAs */ --grad-text: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%); /* opt-in accent only */ --glow-coral: radial-gradient(60% 60% at 50% 40%, rgba(255, 170, 168, 0.45) 0%, transparent 70%); --glow-peach: radial-gradient(closest-side, rgba(255, 217, 194, 0.50), transparent); /* Fine film grain — a tiny tiled SVG turbulence, applied via .dd-grain. Low opacity; static (cheap) so it's safe under reduced-motion. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E"); /* Waveform silhouette — used as a CSS mask so a plain bar reads as audio. White bars on transparent → valid for both luminance + alpha masking. 40 thin bars on a fixed 200px tile (see --wave-mask-size): a fixed-px mask width keeps the bars slim + dense regardless of bar HEIGHT. Drives .dd-progress and the live audio-player transport. */ --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cg fill='%23fff'%3E%3Crect x='0.3' y='9.0' width='2.4' height='6' rx='1.2'/%3E%3Crect x='5.3' y='7.0' width='2.4' height='10' rx='1.2'/%3E%3Crect x='10.3' y='4.0' width='2.4' height='16' rx='1.2'/%3E%3Crect x='15.3' y='1.0' width='2.4' height='22' rx='1.2'/%3E%3Crect x='20.3' y='5.0' width='2.4' height='14' rx='1.2'/%3E%3Crect x='25.3' y='8.0' width='2.4' height='8' rx='1.2'/%3E%3Crect x='30.3' y='6.0' width='2.4' height='12' rx='1.2'/%3E%3Crect x='35.3' y='2.0' width='2.4' height='20' rx='1.2'/%3E%3Crect x='40.3' y='0.0' width='2.4' height='24' rx='1.2'/%3E%3Crect x='45.3' y='3.0' width='2.4' height='18' rx='1.2'/%3E%3Crect x='50.3' y='7.0' width='2.4' height='10' rx='1.2'/%3E%3Crect x='55.3' y='9.0' width='2.4' height='6' rx='1.2'/%3E%3Crect x='60.3' y='6.0' width='2.4' height='12' rx='1.2'/%3E%3Crect x='65.3' y='3.0' width='2.4' height='18' rx='1.2'/%3E%3Crect x='70.3' y='1.0' width='2.4' height='22' rx='1.2'/%3E%3Crect x='75.3' y='4.0' width='2.4' height='16' rx='1.2'/%3E%3Crect x='80.3' y='7.0' width='2.4' height='10' rx='1.2'/%3E%3Crect x='85.3' y='5.0' width='2.4' height='14' rx='1.2'/%3E%3Crect x='90.3' y='8.0' width='2.4' height='8' rx='1.2'/%3E%3Crect x='95.3' y='9.5' width='2.4' height='5' rx='1.2'/%3E%3Crect x='100.3' y='8.0' width='2.4' height='8' rx='1.2'/%3E%3Crect x='105.3' y='5.0' width='2.4' height='14' rx='1.2'/%3E%3Crect x='110.3' y='2.0' width='2.4' height='20' rx='1.2'/%3E%3Crect x='115.3' y='0.0' width='2.4' height='24' rx='1.2'/%3E%3Crect x='120.3' y='3.0' width='2.4' height='18' rx='1.2'/%3E%3Crect x='125.3' y='6.0' width='2.4' height='12' rx='1.2'/%3E%3Crect x='130.3' y='8.0' width='2.4' height='8' rx='1.2'/%3E%3Crect x='135.3' y='7.0' width='2.4' height='10' rx='1.2'/%3E%3Crect x='140.3' y='4.0' width='2.4' height='16' rx='1.2'/%3E%3Crect x='145.3' y='1.0' width='2.4' height='22' rx='1.2'/%3E%3Crect x='150.3' y='2.0' width='2.4' height='20' rx='1.2'/%3E%3Crect x='155.3' y='5.0' width='2.4' height='14' rx='1.2'/%3E%3Crect x='160.3' y='8.0' width='2.4' height='8' rx='1.2'/%3E%3Crect x='165.3' y='9.0' width='2.4' height='6' rx='1.2'/%3E%3Crect x='170.3' y='7.0' width='2.4' height='10' rx='1.2'/%3E%3Crect x='175.3' y='4.0' width='2.4' height='16' rx='1.2'/%3E%3Crect x='180.3' y='6.0' width='2.4' height='12' rx='1.2'/%3E%3Crect x='185.3' y='3.0' width='2.4' height='18' rx='1.2'/%3E%3Crect x='190.3' y='1.0' width='2.4' height='22' rx='1.2'/%3E%3Crect x='195.3' y='5.0' width='2.4' height='14' rx='1.2'/%3E%3C/g%3E%3C/svg%3E"); --wave-mask-size: 200px 100%; /* fixed tile width → consistent slim bars */ /* ---------------------------------------------------------- 4. TYPOGRAPHY ---------------------------------------------------------- */ --font-display: 'Archivo Black', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace; /* Fluid type scale (clamp; keeps the existing clamp feel) */ --fs-display: clamp(40px, 6vw, 84px); /* hero wordmark / headline */ --fs-h1: clamp(34px, 5vw, 60px); --fs-h2: clamp(28px, 4vw, 44px); --fs-h3: clamp(22px, 3vw, 30px); --fs-lead: clamp(18px, 2.2vw, 24px); /* section intro text */ --fs-body: 17px; --fs-small: 15px; --fs-label: 13px; /* mono kicker, letter-spaced */ /* Line-height + tracking */ --lh-display: 1.05; --lh-tight: 1.2; --lh-snug: 1.35; --lh-body: 1.6; --tracking-tight: -0.01em; --tracking-wide: 0.06em; /* hero subtitle, kickers */ --tracking-label: 0.08em; /* mono tape-labels */ /* ---------------------------------------------------------- 5. SPACING SCALE — 4px base ---------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; --space-13: 120px; --space-14: 160px; --space-15: 200px; --space-16: 240px; /* ---------------------------------------------------------- 6. RADII ---------------------------------------------------------- */ --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; /* default card (evolves the old 24px) */ --radius-xl: 40px; --radius-pill: 999px; --radius-organic: 28px 28px 28px 10px; /* one tightened corner = signature */ /* ---------------------------------------------------------- 7. ELEVATION + BLUR — soft, warm, diffuse (never hard/black) ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(58, 48, 46, 0.06), 0 2px 6px rgba(58, 48, 46, 0.05); --shadow-md: 0 6px 16px rgba(58, 48, 46, 0.08), 0 2px 4px rgba(58, 48, 46, 0.05); --shadow-lg: 0 20px 50px rgba(58, 48, 46, 0.10), 0 6px 14px rgba(58, 48, 46, 0.06); --shadow-glow: 0 18px 40px rgba(255, 139, 136, 0.35); /* pink CTAs, active cards */ --blur-glass: 20px; /* ---------------------------------------------------------- 8. Z-INDEX SCALE ---------------------------------------------------------- */ --z-behind: -1; --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-navbar: 1000; --z-overlay: 1500; --z-modal: 2000; --z-toast: 3000; /* ---------------------------------------------------------- 9. MOTION — calm, expo-eased, intentional. Always gate animation behind prefers-reduced-motion. ---------------------------------------------------------- */ --dur-fast: 140ms; --dur-base: 260ms; --dur-slow: 420ms; --dur-page: 640ms; --ease-dreamy: cubic-bezier(.22, 1, .36, 1); /* signature expo-out */ --ease-soft: cubic-bezier(.4, 0, .2, 1); /* ---------------------------------------------------------- 10. LAYOUT — container widths. Breakpoint reference (CSS can't use vars in media queries): ≤480 · ≤768 · ≤1024 · ≤1264 · wide ---------------------------------------------------------- */ --container: 1400px; --container-narrow: 960px; --container-pad: var(--space-8); /* 40px; tightened on small screens */ --navbar-h: 60px; /* ---------------------------------------------------------- 11. BACK-COMPAT ALIASES — legacy names map onto new tokens so existing CSS/inline styles keep working during migration. Remove as pages adopt the semantic tokens directly. ---------------------------------------------------------- */ --primary: var(--coral-300); --primary-dark: var(--coral-500); --primary-light: var(--coral-200); --primary-extra-light: var(--tint-20); --dark: var(--ink); --dark-light: #2A2A2A; /* legacy dark footer (P3 reskins) */ --white: var(--paper); --border-radius: var(--radius-lg); /* Legacy dark-footer text colours — superseded by P3 global chrome. */ --footer-text: #CCCCCC; /* links / contact */ --footer-text-muted: #999999; /* body */ --footer-text-dim: #666666; /* copyright */ }