/* ============================================================================ PELOPONEZ — DESIGN TOKENS Three-layer architecture: PRIMITIVE -> SEMANTIC -> COMPONENT (skill: design-system / references/token-architecture.md) RULE: components never use raw hex. Always var(--...). ========================================================================= */ /* ========================================================================== LAYER 1 — PRIMITIVE TOKENS Raw values. No meaning. Change rarely. ========================================================================== */ :root { /* ---- Brand red scale ------------------------------------------------- 500 is the exact brand red from project_spec.md §3.2 (#FF0000). Measured WCAG: #FF0000 on white = 4.00:1 (fails AA body text), on #0B0B10 = 4.91:1 (passes AA). 700 = #CC0000 = 5.89:1 with white. */ --pl-red-50: #FFF1F1; --pl-red-100: #FFDADA; --pl-red-200: #FFB3B3; --pl-red-300: #FF8080; --pl-red-400: #FF4D4D; --pl-red-500: #FF0000; /* BRAND */ --pl-red-600: #E60000; --pl-red-700: #CC0000; /* action red on light surfaces */ --pl-red-800: #A80010; --pl-red-900: #7A000C; /* ---- Neutral / ink scale (warm-neutral, brand secondary #333745 at 700) */ --pl-ink-0: #FFFFFF; --pl-ink-25: #FAFAFB; --pl-ink-50: #F5F5F7; --pl-ink-100: #ECECF0; --pl-ink-200: #DDDDE4; --pl-ink-300: #C2C4CF; --pl-ink-400: #9BA2B4; --pl-ink-500: #6F6F6F; /* AA on white: 5.02:1 */ --pl-ink-600: #55596A; --pl-ink-700: #333745; /* BRAND SECONDARY */ --pl-ink-800: #23262F; --pl-ink-850: #191919; --pl-ink-900: #14141B; --pl-ink-950: #0B0B10; --pl-ink-1000:#000000; /* ---- Support hues ---------------------------------------------------- */ --pl-amber-400: #FFC000; --pl-amber-600: #B26E00; --pl-green-500: #22C55E; --pl-green-700: #157F3C; --pl-blue-500: #3B82F6; --pl-blue-700: #1D4ED8; /* ---- Alpha primitives (for materials / borders on translucent layers) - */ --pl-white-a04: rgba(255, 255, 255, 0.04); --pl-white-a08: rgba(255, 255, 255, 0.08); --pl-white-a12: rgba(255, 255, 255, 0.12); --pl-white-a60: rgba(255, 255, 255, 0.60); --pl-white-a80: rgba(255, 255, 255, 0.80); --pl-black-a08: rgba(0, 0, 0, 0.08); --pl-black-a16: rgba(0, 0, 0, 0.16); --pl-black-a40: rgba(0, 0, 0, 0.40); --pl-black-a70: rgba(0, 0, 0, 0.70); --pl-red-a16: rgba(255, 0, 0, 0.16); --pl-red-a24: rgba(255, 0, 0, 0.24); --pl-red-a40: rgba(255, 0, 0, 0.40); /* ---- Spacing (4px base, skill: design-system/primitive-tokens.md) ----- */ --pl-space-0: 0; --pl-space-px: 1px; --pl-space-1: 0.25rem; /* 4 */ --pl-space-2: 0.5rem; /* 8 */ --pl-space-3: 0.75rem; /* 12 */ --pl-space-4: 1rem; /* 16 */ --pl-space-5: 1.25rem; /* 20 */ --pl-space-6: 1.5rem; /* 24 */ --pl-space-8: 2rem; /* 32 */ --pl-space-10: 2.5rem; /* 40 */ --pl-space-12: 3rem; /* 48 */ --pl-space-16: 4rem; /* 64 */ --pl-space-20: 5rem; /* 80 */ --pl-space-24: 6rem; /* 96 */ /* ---- Typography families -------------------------------------------- skill: ui-ux-pro-max / typography.csv -> pairing "Sports/Fitness" */ --pl-font-display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; --pl-font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --pl-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* ---- Type scale (base 16px, ratio 1.25 Major Third) ------------------ */ --pl-text-2xs: 0.6875rem; /* 11 */ --pl-text-xs: 0.75rem; /* 12 */ --pl-text-sm: 0.875rem; /* 14 */ --pl-text-base: 1rem; /* 16 */ --pl-text-lg: 1.125rem; /* 18 */ --pl-text-xl: 1.25rem; /* 20 */ --pl-text-2xl: 1.5rem; /* 24 */ --pl-text-3xl: 1.875rem; /* 30 */ --pl-text-4xl: 2.25rem; /* 36 */ --pl-text-5xl: 3rem; /* 48 */ --pl-text-6xl: 3.75rem; /* 60 */ /* ---- Weights --------------------------------------------------------- */ --pl-weight-light: 300; --pl-weight-regular: 400; --pl-weight-medium: 500; --pl-weight-semibold: 600; --pl-weight-bold: 700; /* ---- Leading / tracking --------------------------------------------- skill: apple-design §15 — tracking is size-specific, never one value. */ --pl-leading-none: 1; --pl-leading-tight: 1.1; --pl-leading-snug: 1.25; --pl-leading-base: 1.5; --pl-leading-relaxed: 1.65; --pl-track-display: -0.02em; /* large text reads too loose as it grows */ --pl-track-heading: -0.01em; --pl-track-body: 0; --pl-track-caps: 0.06em; /* all-caps needs air */ /* ---- Radius ---------------------------------------------------------- */ --pl-radius-none: 0; --pl-radius-xs: 2px; --pl-radius-sm: 4px; --pl-radius-md: 8px; --pl-radius-lg: 12px; --pl-radius-xl: 18px; --pl-radius-full: 999px; /* ---- Elevation ------------------------------------------------------- */ --pl-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.10); --pl-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.12); --pl-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.18); --pl-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.26); --pl-glow-red: 0 0 0 1px var(--pl-red-a24), 0 10px 34px var(--pl-red-a24); /* ---- Motion --------------------------------------------------------- skill: emil-design-eng — built-in CSS easings are too weak. skill: ui-ux-pro-max/motion.csv + apple-design §4 for the tiers. */ --pl-dur-instant: 100ms; --pl-dur-fast: 160ms; --pl-dur-base: 200ms; --pl-dur-slow: 250ms; --pl-dur-exit: 180ms; /* exit is always faster than enter */ --pl-dur-reveal: 500ms; /* GSAP M1 scroll reveal */ --pl-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --pl-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --pl-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* ---- Layout ---------------------------------------------------------- */ --pl-container: 1280px; --pl-header-h: 76px; --pl-header-h-sm: 62px; --pl-prose: 68ch; --pl-tap: 44px; /* minimum touch target */ --pl-z-header: 1030; --pl-z-drawer: 1045; --pl-z-toast: 1090; } /* ========================================================================== LAYER 2 — SEMANTIC TOKENS Purpose-based aliases. This is the layer that themes swap. Default (:root) = DARK, because the public site is dark-first: the exact brand red #FF0000 only reaches WCAG AA on a dark ground. ========================================================================== */ :root, [data-theme='dark'] { color-scheme: dark; --color-background: var(--pl-ink-950); --color-background-alt: #101017; --color-foreground: #EDEDF2; --color-surface: var(--pl-ink-900); --color-surface-raised: #1B1B24; --color-surface-foreground:#EDEDF2; --color-primary: var(--pl-red-500); --color-primary-hover: var(--pl-red-400); --color-primary-active: var(--pl-red-600); --color-primary-foreground:var(--pl-ink-0); --color-primary-soft: var(--pl-red-a16); --color-secondary: var(--pl-ink-800); --color-secondary-hover: #2C303C; --color-secondary-foreground: #EDEDF2; --color-muted: #1A1A22; --color-muted-foreground: var(--pl-ink-400); --color-accent: var(--pl-amber-400); --color-accent-foreground: var(--pl-ink-950); --color-border: var(--pl-white-a08); --color-border-strong: var(--pl-white-a12); --color-success: var(--pl-green-500); --color-success-foreground:var(--pl-ink-950); --color-warning: var(--pl-amber-400); --color-warning-foreground:var(--pl-ink-950); --color-destructive: var(--pl-red-400); --color-destructive-foreground: var(--pl-ink-950); --color-info: var(--pl-blue-500); --color-ring: var(--pl-red-500); --color-overlay: var(--pl-black-a70); /* Materials (apple-design §12): translucent chrome, content scrolls under */ --material-chrome: rgba(11, 11, 16, 0.72); --material-chrome-blur: blur(20px) saturate(180%); --material-edge: var(--pl-white-a08); --shadow-card: var(--pl-shadow-md); --shadow-float: var(--pl-shadow-lg); --spacing-section: var(--pl-space-16); --spacing-block: var(--pl-space-8); --spacing-component: var(--pl-space-4); --radius-control: var(--pl-radius-md); --radius-card: var(--pl-radius-lg); --radius-panel: var(--pl-radius-xl); } /* ---- LIGHT theme (used by /admin and by any light section) -------------- Brand red at full saturation is not AA on white, so the action red steps down to --pl-red-700 (#CC0000, 5.89:1 with white). Same brand, safe value. */ [data-theme='light'] { color-scheme: light; --color-background: var(--pl-ink-50); --color-background-alt: var(--pl-ink-25); --color-foreground: var(--pl-ink-850); --color-surface: var(--pl-ink-0); --color-surface-raised: var(--pl-ink-0); --color-surface-foreground:var(--pl-ink-850); --color-primary: var(--pl-red-700); --color-primary-hover: var(--pl-red-800); --color-primary-active: var(--pl-red-900); --color-primary-foreground:var(--pl-ink-0); --color-primary-soft: var(--pl-red-50); --color-secondary: var(--pl-ink-100); --color-secondary-hover: var(--pl-ink-200); --color-secondary-foreground: var(--pl-ink-700); --color-muted: var(--pl-ink-100); --color-muted-foreground: var(--pl-ink-500); --color-accent: var(--pl-amber-600); --color-accent-foreground: var(--pl-ink-0); --color-border: var(--pl-ink-200); --color-border-strong: var(--pl-ink-300); --color-success: var(--pl-green-700); --color-success-foreground:var(--pl-ink-0); --color-warning: var(--pl-amber-600); --color-warning-foreground:var(--pl-ink-0); --color-destructive: var(--pl-red-700); --color-destructive-foreground: var(--pl-ink-0); --color-info: var(--pl-blue-700); --color-ring: var(--pl-red-700); --color-overlay: var(--pl-black-a40); --material-chrome: var(--pl-white-a80); --material-chrome-blur: blur(20px) saturate(180%); --material-edge: var(--pl-ink-200); --shadow-card: var(--pl-shadow-xs); --shadow-float: var(--pl-shadow-md); } /* Admin density override (skill: ui-ux-pro-max --density high => 8-32px) */ [data-density='compact'] { --spacing-section: var(--pl-space-8); --spacing-block: var(--pl-space-5); --spacing-component: var(--pl-space-3); --radius-card: var(--pl-radius-md); --radius-panel: var(--pl-radius-lg); } /* ========================================================================== LAYER 3 — COMPONENT TOKENS Per-component knobs that reference the semantic layer only. ========================================================================== */ :root { /* Button */ --btn-bg: var(--color-primary); --btn-bg-hover: var(--color-primary-hover); --btn-bg-active: var(--color-primary-active); --btn-fg: var(--color-primary-foreground); --btn-radius: var(--radius-control); --btn-padding-y: 0.7rem; --btn-padding-x: 1.35rem; --btn-min-height: var(--pl-tap); --btn-font: var(--pl-font-display); --btn-weight: var(--pl-weight-semibold); --btn-tracking: var(--pl-track-caps); --btn-press-scale: 0.97; --btn-transition: background-color var(--pl-dur-fast) var(--pl-ease-out), border-color var(--pl-dur-fast) var(--pl-ease-out), color var(--pl-dur-fast) var(--pl-ease-out), transform var(--pl-dur-instant) var(--pl-ease-out), box-shadow var(--pl-dur-fast) var(--pl-ease-out); /* Card */ --card-bg: var(--color-surface); --card-fg: var(--color-surface-foreground); --card-border: var(--color-border); --card-radius: var(--radius-card); --card-padding: var(--pl-space-5); --card-shadow: var(--shadow-card); --card-shadow-hover: var(--shadow-float); --card-media-ratio: 1 / 1; /* Input */ --input-bg: var(--color-surface); --input-fg: var(--color-foreground); --input-border: var(--color-border-strong); --input-border-focus: var(--color-ring); --input-radius: var(--radius-control); --input-min-height: var(--pl-tap); --input-padding-y: 0.62rem; --input-padding-x: 0.9rem; --input-placeholder: var(--color-muted-foreground); /* Header */ --header-bg: var(--material-chrome); --header-blur: var(--material-chrome-blur); --header-edge: var(--material-edge); --header-height: var(--pl-header-h); /* Focus ring (skill: design-system/states-and-variants.md) */ --ring-width: 2px; --ring-offset: 2px; --ring-color: var(--color-ring); /* Badge */ --badge-radius: var(--pl-radius-full); --badge-font: var(--pl-font-display); --badge-tracking: var(--pl-track-caps); /* Table (admin) */ --table-row-hover: var(--color-muted); --table-border: var(--color-border); }