@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500&family=Barlow+Condensed:ital,wght@0,300;0,400;0,600;0,700;1,400&family=DM+Mono:wght@300;400;500&display=swap'); /* tokens.css — TOURney design system tokens * * Single source of truth for color, type, spacing, motion. * Every page imports this. Tournament-specific brand colors override * by setting CSS custom properties on :root via tourney-init.js. */ :root { /* Brand — overrideable per tournament. Canonical palette mirrors /player + /create. */ --gold: #c09030; --gold-l: #d4a840; --gold-light: #d4a840; /* alias for legacy callers */ --gold-p: #e8cc80; /* peach gold accent — used on hover/highlight in /player */ --gold-dim: rgba(192, 144, 48, 0.18); --ink: #0f0a05; /* canonical /player ink — deeper than legacy #1a1008 */ --bg: #0f0a05; --surface: rgba(245, 237, 224, 0.05); /* cream-tint surface — matches /player */ --card: rgba(245, 237, 224, 0.05); /* alias — /player + /create treat cards as surface */ --card2: rgba(245, 237, 224, 0.07); --border: rgba(245, 237, 224, 0.13); /* cream-tinted border — not gold — matches /player */ --muted: rgba(245, 237, 224, 0.5); --text: #f5ede0; /* cream text on dark ink */ --cream: #f5ede0; /* Semantic colors — DO NOT override per tournament */ --red: #c0392b; --green: #27ae60; --blue: #2980b9; --orange: #e67e22; --purple: #8e44ad; /* Type */ --font-sans: 'Barlow', -apple-system, sans-serif; --font-mono: 'DM Mono', 'Consolas', 'Monaco', monospace; --font-display: 'Playfair Display', Georgia, serif; --font-condensed: 'Barlow Condensed', sans-serif; /* Spacing scale — multiples of 4px */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; /* Radius */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* Elevation */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); } /* Skeleton loader — used by every page's loading state. * Apply class .skeleton to any block to show a pulsing placeholder. */ .skeleton { background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 100%); background-size: 200% 100%; animation: skeleton-pulse 1.4s ease-in-out infinite; border-radius: var(--radius-sm); color: transparent; user-select: none; pointer-events: none; } @keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Offline indicator — tourney-init.js toggles .is-offline on . */ body.is-offline .nav-offline-dot { display: inline-block; } .nav-offline-dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-left: var(--space-2); animation: offline-pulse 1.6s ease-in-out infinite; vertical-align: middle; } @keyframes offline-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Reduced-motion users get instant transitions. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ───────────────────────────────────────────────────────────── * DESIGN SYSTEM — surface tiers, Course Mode, components, motion * Added 2026-05-29. Principles in DESIGN.md: * Glance don't read · The score is the hero · Mono = data not prose · * Gold = action & identity · Earn every tap. * All additive — inert until a page opts in via class/attribute. * ───────────────────────────────────────────────────────────── */ /* Surface tiers — one token set, two contexts. * Lean-back (default): dense/dark/indoor. Active: high-contrast/large-tap/outdoor. */ .surface-active { --text: #ffffff; --muted: #b8a884; font-size: 16px; } .surface-active button, .surface-active .tap, .surface-active .stepper { min-height: 48px; min-width: 48px; } /* Sunlight Course Mode — opt-in high-contrast for direct sun. * Toggle sets [data-mode="course"] on ; affects active surfaces only. */ [data-mode="course"] .surface-active { --bg: #f7f4ec; --surface: #fffdf7; --card: #ffffff; --text: #0d0a05; --muted: #4a4030; --border: #c09030; } /* Cards */ .ds-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-2); } .ds-card-accent { border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; } .ds-card-hero { border: 1px solid var(--gold); box-shadow: 0 0 0 1px rgba(192, 144, 48, 0.15), var(--shadow); padding: var(--space-6); } .ds-card-title { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; color: var(--gold); margin-bottom: var(--space-2); } /* Pills — status / format / score badges */ .pill { display: inline-block; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.15rem 0.5rem; border-radius: var(--radius-pill); text-transform: uppercase; } .pill-gold { background: var(--gold-dim); color: var(--gold); border: 1px solid rgba(192, 144, 48, 0.30); } .pill-green { background: rgba(39, 174, 96, 0.15); color: var(--green); border: 1px solid rgba(39, 174, 96, 0.30); } .pill-red { background: rgba(192, 57, 43, 0.15); color: var(--red); border: 1px solid rgba(192, 57, 43, 0.30); } .pill-orange { background: rgba(230, 126, 34, 0.15); color: var(--orange); border: 1px solid rgba(230, 126, 34, 0.30); } .pill-blue { background: rgba(41, 128, 185, 0.15); color: var(--blue); border: 1px solid rgba(41, 128, 185, 0.30); } .pill-purple { background: rgba(142, 68, 173, 0.15); color: var(--purple); border: 1px solid rgba(142, 68, 173, 0.30); } /* Tap targets — earn every tap (gloved-thumb floor) */ .tap { min-height: 48px; min-width: 48px; } .tap-lg { min-height: 56px; min-width: 56px; } /* Motion — score-commit feedback + birdie/eagle celebration */ @keyframes commit-flash { 0% { background: var(--gold-dim); } 100% { background: transparent; } } .commit-flash { animation: commit-flash var(--dur-slow) var(--ease-out); } .score-birdie { color: var(--gold); font-weight: 800; } .score-eagle { color: var(--blue); font-weight: 800; }