/* * Shared design-token core. * * Link this file before an application's stylesheet. Application-level roots * may override semantic roles where their surface requires a distinct palette; * platform brand roles remain stable across first-party GolfKit chrome. */ :root { /* ── GolfKit brand tokens ─────────────────────────────────────────── */ /* GolfKit-owned chrome uses one stable navy ramp across discovery, setup, * operations, booking hand-offs and communications. Venue-owned theme * tokens may still override their own customer surfaces. */ --golfkit-primary: #0f172a; --golfkit-primary-hover: #0b1220; --golfkit-primary-muted: #64748b; --golfkit-primary-subtle: #cbd5e1; --golfkit-primary-surface: #f1f5f9; --golfkit-on-primary: #ffffff; --golfkit-wordmark-accent: #99ee99; --golfkit-wordmark-accent-on-light: #226655; --accent-on-dark: #77cc88; /* ── Semantic accent / highlight tokens ──────────────────────────── */ --accent: #34785c; --accent-muted: #a7cbb7; --accent-subtle: #d9e9df; /* The accent as a light hover wash over a card or transparent control; * follows the theme's accent because it mixes the live --accent. */ --accent-tint: color-mix(in srgb, var(--accent) 8%, transparent); /* Darkest step of the accent ramp, for accent-coloured text that must clear * WCAG AA on --accent-subtle, where --accent itself only reaches 5.6:1. */ --accent-strong: #123b30; --highlight: #db5942; --highlight-muted: #edaca0; --highlight-subtle: #f6d6d0; /* ── Base tokens ─────────────────────────────────────────────────── */ --bg: #f5f5f2; --card: #ffffff; --text: #1a1a1a; --text-muted: #5a6b70; --text-light: #8a9da3; --border: #dce4e6; --warning-bg: #fef2f2; --warning-border: #fecaca; --warning-text: #b91c1c; --success-bg: #f0fdf4; --success-border: #bbf7d0; --success-text: #15803d; /* ── Layout radii ────────────────────────────────────────────────── */ --radius-card: 12px; --radius-btn: 8px; --radius-input: 8px; --radius-sm: 6px; --radius-pill: 999px; /* ── Spacing scale ───────────────────────────────────────────────── */ /* 4px grid. The half-steps (6/10/14) are kept because they are the * dominant control-padding rhythm already used by hand across the shells * (inputs, chips, table cells). Migrate hardcoded px to these so spacing * stays consistent between components and shells. */ --space-3xs: 2px; --space-2xs: 4px; --space-xs: 6px; --space-sm: 8px; --space-md: 10px; --space-lg: 12px; --space-xl: 14px; --space-2xl: 16px; --space-3xl: 20px; --space-4xl: 24px; --space-5xl: 32px; /* ── Motion ──────────────────────────────────────────────────────── */ /* Single source of truth for interaction timing. `.15s ease` is the * de-facto standard already in use ~158×; these collapse the .16/.18/.2s * near-misses onto one value. Honour prefers-reduced-motion below. */ --ease: ease; --dur-fast: 0.1s; --dur: 0.15s; --dur-slow: 0.3s; /* Common composite transitions so call sites read the same everywhere. */ --transition-control: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); --transition-btn: opacity var(--dur) var(--ease), transform var(--dur-fast) var(--ease); /* ── Focus ───────────────────────────────────────────────────────── */ /* --focus-ring (the soft glow colour) stays per-app since its rgba differs. * These standardise the SHAPE: a 2px solid outline for buttons/nav/cards, * and a 3px glow ring for inputs. * * The ring COLOUR is --focus-ring-color, which a theme sets to its accent * carried to at least 3:1 against the surface behind the control. It is left * undefined here so a surface that has not adopted the readable rule keeps * drawing its accent; every rule falls back to var(--accent). Customer pages * get it from venueThemeCss in @golfkit/service-runtime, and the storefront * and admin shells from the readable-colour rule behind gkThemeCssVars. */ --focus-outline-width: 2px; --focus-glow-width: 3px; /* Gap between a control's edge and its focus outline. Controls whose edge * sits inside a clipping container draw the ring inset instead, with the * negative counterpart. */ --focus-outline-offset: 2px; --focus-outline-offset-inset: -2px; } /* The first focusable control in each first-party shell bypasses repeated * navigation and lands on that page's main task region. */ .gk-skip-link { position: fixed; top: var(--space-sm, 8px); left: var(--space-sm, 8px); z-index: 2147483647; padding: var(--space-sm, 8px) var(--space-md, 10px); border-radius: var(--radius-sm, 6px); background: var(--primary, var(--golfkit-primary, #0f172a)); color: var(--primary-fg, #fff); font-weight: 700; text-decoration: none; transform: translateY(-160%); transition: transform 120ms ease; } .gk-skip-link:focus { transform: translateY(0); outline: var(--focus-glow-width, 3px) solid var(--focus-ring-color, var(--accent, #34785c)); outline-offset: var(--focus-outline-offset, 2px); } /* ─────────────────────────────────────────────────────────────── * Foundation * * First-class contrast roles, type ramp, depth tiers, expanded spacing, * emphasized motion curve, icon metrics and touch-target tokens. * ─────────────────────────────────────────────────────────────── */ :root { /* ── Type scale ──────────────────────────────────────────────────── * A deliberate ramp replacing the ad-hoc 8–44px "size soup". The * 11/12/13 steps keep today's dense admin text expressible; 16–32 are * the working hierarchy; 40–64 are the editorial display tier the * storefront's serif currently never reaches. */ --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px; --fs-40: 40px; --fs-48: 48px; --fs-64: 64px; /* Paired line-heights + the caps-label tracking used by uppercase captions. */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --lh-relaxed: 1.65; --ls-caps: 0.04em; /* ── Contrast text/border roles ──────────────────────────────────── * Choose roles by the content's applicable contrast requirement; these * values do not make every size or placement automatically conformant. * --text-tertiary 3.54:1 bg / 3.86:1 card (large text and non-text only) * --text-placeholder 4.69:1 on card (placeholder text) * --accent-text 5.16:1 bg / 5.63:1 card (accent for TEXT — prices, links, labels) * --border-strong 1.50:1 vs bg (structural lines; --border 1.18:1 stays for hairlines) */ --text-tertiary: #71858c; --text-placeholder: #64777e; --accent-text: #226655; --border-strong: #c0cccf; /* ── Elevation tiers ─────────────────────────────────────────────── * One four-step depth system to replace the ~50 ad-hoc box-shadows. * Tinted through --primary-rgb so elevation re-themes per tenant * (falls back to the admin navy where the channel token is absent). */ --elevation-1: 0 1px 3px rgba(var(--primary-rgb, 15, 23, 42), 0.05), 0 1px 2px rgba(var(--primary-rgb, 15, 23, 42), 0.04); --elevation-2: 0 4px 12px rgba(var(--primary-rgb, 15, 23, 42), 0.07), 0 2px 4px rgba(var(--primary-rgb, 15, 23, 42), 0.04); --elevation-3: 0 12px 32px rgba(var(--primary-rgb, 15, 23, 42), 0.10), 0 4px 8px rgba(var(--primary-rgb, 15, 23, 42), 0.04); --elevation-4: 0 24px 64px rgba(var(--primary-rgb, 15, 23, 42), 0.16), 0 8px 20px rgba(var(--primary-rgb, 15, 23, 42), 0.08); /* ── Editorial spacing extension ─────────────────────────────────── * The scale previously capped at 32px, so generous section rhythm * could only exist as one-off literals. These make it expressible. */ --space-6xl: 48px; --space-7xl: 64px; --space-8xl: 96px; /* ── Motion signature ────────────────────────────────────────────── * The expo-out curve the storefront already uses in its best moments, * promoted to a token so the WHOLE product can share one signature. * (--ease stays `ease` until migration.) */ --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); /* ── Touch ───────────────────────────────────────────────────────── * Minimum tap-target for interactive controls (WCAG 2.5.5 / HIG). */ --gk-min-tap: 44px; /* ── Narrow control widths ───────────────────────────────────────── * A control that holds a short value (a currency symbol, a three-letter * code, a count) is sized to it instead of filling its row. */ --control-width-xs: 60px; --control-width-sm: 80px; /* ── Caution (amber) status family ───────────────────────────────── * Promoted from the storefront so admin surfaces stop relying on * hardcoded fallbacks. Same values the storefront already ships. */ --caution-bg: #fffbeb; --caution-border: #fde68a; --caution-text: #92400e; /* ── Semantic status families ────────────────────────────────────── * Four tones, one shape. Every family carries: * -text readable on -bg and on the page/card surface (>= 4.5:1) * -bg the soft wash behind text of that tone * -border the hairline around a wash; decorative, never the only cue * -solid a saturated fill for a control or pill that must outweigh its * neighbours, carrying -on-solid text (>= 4.5:1) * -on-solid text drawn on -solid * Pick the family by meaning, never by hue: * danger a failure, a refusal, a destructive action * success a completed or healthy state * caution a state that needs attention but has not failed (the "warning" * tone of gk-alert, gk-badge and gk-status-banner) * info neutral guidance, tinted with the accent so it follows the theme * --success-* and --caution-* are declared above. The --warning-* triplet is * the venue theme's input for the danger colours (gkThemeCssVars and * venueThemeCss write it), so --danger-* reads through it and a themed venue * keeps its own danger palette. Read --danger-*, not --warning-*, in every * component and product stylesheet. */ --danger-text: var(--warning-text); --danger-bg: var(--warning-bg); --danger-border: var(--warning-border); --danger-solid: var(--warning-text); --danger-on-solid: #ffffff; --success-solid: var(--success-text); --success-on-solid: #ffffff; --caution-solid: var(--caution-text); --caution-on-solid: #ffffff; --info-text: var(--accent-strong); --info-bg: var(--accent-subtle); --info-border: var(--accent-muted); --info-solid: var(--accent); --info-on-solid: var(--accent-fg, #ffffff); /* ── Overlay radius ──────────────────────────────────────────────── * Modals/large overlays currently hand-roll 14–16px; one token. */ --radius-modal: 14px; /* ── Immersive data-surface roles ────────────────────────────────── * Full-screen maps, simulators, and visual analysis tools need a dark * context without inventing a product-specific palette. These roles keep * their canvas, floating surfaces, and readable-on-dark copy aligned with * GolfKit navy/teal/coral while leaving ordinary page tokens unchanged. */ --immersive-canvas: #0a0f1c; --immersive-surface: rgba(15, 23, 42, 0.94); --immersive-surface-raised: #1d2946; --immersive-border: rgba(156, 199, 194, 0.28); --immersive-border-strong: rgba(156, 199, 194, 0.58); --immersive-text: #ffffff; --immersive-text-muted: #c9cdd6; --immersive-text-faint: #9aa8ad; } /* Respect reduced-motion globally for token-driven transitions/animations. * Per-shell stylesheets historically only set this in super-admin.css; placing * it here covers every page that links the shared tokens. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; } } /* ─────────────────────────────────────────────────────────────── * Shared visibility utilities (consolidated from per-shell dupes). * These were defined byte-identically in admin.css / super-admin.css / * tenant-admin.css; centralised here (loaded first by all shells) so the * JS visibility-toggle layer references one definition. Inert on the * customer page (it only ever toggles its own elements). * ─────────────────────────────────────────────────────────────── */ .hidden { display: none !important; } .u-hidden { display: none !important; } /* The UA's [hidden]{display:none} loses to ANY author display rule on the * same element (e.g. a class with display:grid), which silently breaks every * hidden-attribute toggle — gk-tabs panels and the storefront's admin pause * pill both shipped this bug. Restore the attribute's contract globally: * hidden means hidden, regardless of what classes the element carries. */ [hidden] { display: none !important; }