/* ========================================================================== Golfskálinn Design Tokens — single source of truth for app.golfskalinn.com ========================================================================== Layers: 1. Primitives — raw brand ramps as HSL triplets (never used directly by components; reference them through semantic tokens). 2. Semantics — role-based tokens, themed light/dark. Components and shell CSS consume ONLY these, as hsl(var(--token)). 3. Aliases — composed values for legacy shell selectors. Theming: theme.js stamps data-theme="light|dark" on before paint. Color values are HSL triplets so consumers can compose alpha: color: hsl(var(--ink) / 0.6); ========================================================================== */ :root { /* -------------------------------------------------------------------- 1 · PRIMITIVES -------------------------------------------------------------------- */ /* Fairway — brand green ramp anchored on Golfskálinn #154428 (green-800) */ --gs-green-50: 146 40% 96%; --gs-green-100: 147 36% 90%; --gs-green-200: 147 30% 80%; --gs-green-300: 148 28% 64%; --gs-green-400: 147 32% 48%; --gs-green-500: 147 40% 37%; --gs-green-600: 146 48% 27%; --gs-green-700: 145 52% 22%; --gs-green-800: 144 53% 17%; /* #154428 — brand */ --gs-green-900: 147 55% 12%; --gs-green-950: 152 50% 7%; /* Flag — Golfskálinn orange ramp anchored on #F57B20 (orange-500) */ --gs-orange-50: 27 100% 96%; --gs-orange-100: 27 96% 89%; --gs-orange-200: 27 94% 78%; --gs-orange-300: 26 93% 66%; --gs-orange-400: 26 92% 60%; --gs-orange-500: 26 91% 54%; /* #F57B20 — brand accent */ --gs-orange-600: 24 86% 45%; --gs-orange-700: 22 82% 37%; /* Linen — warm daylight neutrals (scorecard paper) */ --gs-linen-0: 0 0% 100%; --gs-linen-50: 48 44% 98%; --gs-linen-100: 45 36% 96%; --gs-linen-200: 44 27% 92%; --gs-linen-300: 44 18% 85%; --gs-linen-400: 44 12% 72%; /* Pine — green-shadow neutrals (ink, night surfaces) */ --gs-pine-100: 145 18% 90%; --gs-pine-200: 146 14% 84%; --gs-pine-300: 148 10% 70%; --gs-pine-400: 149 8% 56%; --gs-pine-500: 150 9% 44%; --gs-pine-600: 151 12% 33%; --gs-pine-700: 152 16% 23%; --gs-pine-800: 154 22% 15%; --gs-pine-850: 156 26% 11%; --gs-pine-900: 158 30% 8%; --gs-pine-950: 160 34% 5%; /* Support hues */ --gs-gold-400: 42 74% 52%; /* clubhouse gold — warning */ --gs-gold-700: 40 72% 32%; --gs-teal-400: 170 48% 44%; /* links / info — from site teal #127968 */ --gs-teal-700: 171 62% 24%; --gs-red-400: 356 70% 62%; --gs-red-600: 356 68% 44%; /* -------------------------------------------------------------------- Shape -------------------------------------------------------------------- */ --radius-xs: 0.25rem; /* 4px — checkboxes, tiny chips */ --radius-sm: 0.4375rem;/* 7px — badges, inner elements */ --radius-md: 0.625rem; /* 10px — buttons, inputs, tabs */ --radius-lg: 0.875rem; /* 14px — cards, panels */ --radius-xl: 1.25rem; /* 20px — modals, hero panels */ --radius-full: 999px; /* -------------------------------------------------------------------- Motion — subtle and fast; respect prefers-reduced-motion -------------------------------------------------------------------- */ --duration-fast: 120ms; /* hovers, color shifts */ --duration-base: 180ms; /* most transitions */ --duration-gentle: 260ms; /* drawers, sidebar, tab panels */ --duration-enter: 420ms; /* page/section entrances */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-lift: cubic-bezier(0.34, 1.2, 0.64, 1); /* soft overshoot */ /* Layering */ --z-sidebar: 30; --z-backdrop: 25; --z-header: 20; --z-drawer: 40; } /* -------------------------------------------------------------------- 2 · SEMANTICS — light ("morning round": linen paper, fairway ink) -------------------------------------------------------------------- */ :root, :root[data-theme="light"] { color-scheme: light; --surface-page: var(--gs-linen-0); --surface-raised: var(--gs-linen-0); --surface-sunken: var(--gs-linen-100); --surface-hover: var(--gs-linen-50); --ink: 152 26% 13%; --ink-muted: 151 10% 38%; --ink-faint: 150 8% 52%; --line: 146 14% 86%; --line-strong: 147 12% 75%; --brand: var(--gs-green-800); --brand-strong: var(--gs-green-900); --brand-soft: var(--gs-green-50); --on-brand: 0 0% 100%; --accent: var(--gs-orange-500); --accent-strong: var(--gs-orange-600); --accent-soft: var(--gs-orange-50); --on-accent: 24 80% 12%; --focus: var(--gs-orange-500); --success: 146 46% 28%; --success-surface: 146 42% 94%; --success-line: 146 30% 80%; --warning: 40 78% 30%; --warning-surface: 44 86% 93%; --warning-line: 43 62% 76%; --danger: 356 68% 42%; --danger-surface: 356 74% 96%; --danger-line: 356 52% 85%; --info: 171 62% 24%; --info-surface: 172 45% 93%; --info-line: 171 32% 76%; /* Sidebar becomes the muted app canvas in light mode */ --sidebar-surface: var(--gs-linen-100); --sidebar-raised: var(--gs-linen-0); --sidebar-selected: var(--gs-linen-0); --sidebar-ink: var(--ink); --sidebar-ink-muted: var(--ink-muted); --sidebar-line: var(--line); --shadow-1: 0 1px 2px hsl(152 30% 12% / 0.05), 0 1px 1px hsl(152 30% 12% / 0.04); --shadow-2: 0 2px 4px -1px hsl(152 30% 12% / 0.05), 0 6px 14px -3px hsl(152 30% 12% / 0.07); --shadow-3: 0 4px 10px -2px hsl(152 30% 12% / 0.07), 0 14px 34px -6px hsl(152 30% 12% / 0.12); } /* -------------------------------------------------------------------- 2 · SEMANTICS — dark ("dusk round": pine surfaces, cream ink) -------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --surface-page: var(--gs-pine-950); --surface-raised: var(--gs-pine-900); --surface-sunken: 159 32% 4%; --surface-hover: var(--gs-pine-850); --ink: 42 28% 93%; --ink-muted: 147 9% 64%; --ink-faint: 149 7% 50%; --line: 153 18% 16%; --line-strong: 152 14% 25%; --brand: 146 42% 38%; --brand-strong: 146 45% 45%; --brand-soft: 148 32% 13%; --on-brand: 0 0% 100%; --accent: var(--gs-orange-400); --accent-strong: var(--gs-orange-300); --accent-soft: 26 50% 14%; --on-accent: 24 80% 10%; --focus: var(--gs-orange-400); --success: 146 40% 62%; --success-surface: 147 36% 11%; --success-line: 146 30% 22%; --warning: 43 70% 62%; --warning-surface: 42 48% 11%; --warning-line: 42 44% 24%; --danger: 356 72% 68%; --danger-surface: 356 40% 12%; --danger-line: 356 36% 26%; --info: 170 46% 56%; --info-surface: 171 42% 10%; --info-line: 171 36% 22%; --sidebar-surface: 156 36% 7%; --sidebar-raised: 154 28% 11%; --sidebar-selected: 153 26% 13%; --sidebar-ink: 42 30% 96%; --sidebar-ink-muted: 147 10% 62%; --sidebar-line: 150 18% 19%; --shadow-1: 0 1px 2px hsl(160 40% 2% / 0.4); --shadow-2: 0 2px 4px -1px hsl(160 40% 2% / 0.4), 0 6px 14px -3px hsl(160 40% 2% / 0.5); --shadow-3: 0 4px 10px -2px hsl(160 40% 2% / 0.5), 0 14px 34px -6px hsl(160 40% 2% / 0.6); } /* -------------------------------------------------------------------- 3 · ALIASES — composed values consumed by shell + events CSS -------------------------------------------------------------------- */ :root { --dash-bg: hsl(var(--surface-page)); --dash-panel: hsl(var(--surface-raised)); --dash-panel-soft: hsl(var(--surface-sunken)); --dash-ink: hsl(var(--ink)); --dash-muted: hsl(var(--ink-muted)); --dash-line: hsl(var(--line)); --dash-sidebar: hsl(var(--sidebar-surface)); --dash-sidebar-muted: hsl(var(--sidebar-ink-muted)); --dash-accent: hsl(var(--accent)); --dash-blue: hsl(var(--info)); } /* Shared motion primitive — the system's one entrance animation */ @keyframes gs-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Motion kill-switch: tokens collapse instead of per-rule overrides */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-gentle: 1ms; --duration-enter: 1ms; } }