/** * Design tokens - the only place colour, depth and rhythm are decided. * * Everything downstream (theme, Garage app) reads from here. Legacy * --color-* / --radius-* / --shadow-* names are kept as aliases at the bottom * so older rules keep working while they migrate onto the --pt-* namespace. */ :root { /* ----------------------------------------------------------------- Surfaces: graphite through carbon black. ----------------------------------------------------------------- */ --pt-bg: #070809; --pt-bg-deep: #050607; --pt-bg-elevated: #0b0d10; --pt-bg-panel: #101318; --pt-bg-raised: #15191f; /* ----------------------------------------------------------------- Glass. Three depths, each with its own opacity, blur and edge. ----------------------------------------------------------------- */ --pt-glass-1: rgba(255, 255, 255, 0.028); --pt-glass-2: rgba(255, 255, 255, 0.052); --pt-glass-3: rgba(20, 23, 28, 0.82); --pt-glass-1-solid: #0d1014; --pt-glass-2-solid: #12161c; --pt-glass-3-solid: #171b22; --pt-blur-sm: 10px; --pt-blur-md: 18px; --pt-blur-lg: 30px; /* ----------------------------------------------------------------- Text. ----------------------------------------------------------------- */ --pt-text: #f5f3ee; --pt-text-strong: #fffdf8; --pt-text-muted: #9d9d98; --pt-text-faint: #6f7175; --pt-text-on-gold: #171208; /* ----------------------------------------------------------------- Champagne gold. Warm metallic, never a flat yellow. ----------------------------------------------------------------- */ --pt-gold-1: #8f6a31; --pt-gold-2: #b88a44; --pt-gold-3: #d6b36a; --pt-gold-4: #f0d89a; /* Readable gold for gold-coloured text on dark surfaces. */ --pt-gold-text: #e6c887; --pt-gradient-gold: linear-gradient( 135deg, var(--pt-gold-1) 0%, var(--pt-gold-3) 38%, var(--pt-gold-4) 52%, var(--pt-gold-2) 74%, var(--pt-gold-1) 100% ); --pt-gradient-gold-line: linear-gradient( 90deg, rgba(184, 138, 68, 0) 0%, rgba(214, 179, 106, 0.55) 30%, rgba(240, 216, 154, 0.85) 50%, rgba(214, 179, 106, 0.55) 70%, rgba(184, 138, 68, 0) 100% ); --pt-gradient-surface: linear-gradient( 160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 42%, rgba(255, 255, 255, 0) 100% ); --pt-gradient-hero: radial-gradient( 120% 90% at 78% 18%, rgba(214, 179, 106, 0.16) 0%, rgba(184, 138, 68, 0.05) 34%, rgba(7, 8, 9, 0) 68% ), linear-gradient(180deg, #0b0d10 0%, #070809 60%, #050607 100%); /* ----------------------------------------------------------------- Borders. 1px hairlines, never a thick gold frame. ----------------------------------------------------------------- */ --pt-border: rgba(255, 255, 255, 0.085); --pt-border-strong: rgba(255, 255, 255, 0.14); /* * A form control's outline is the only thing that says "you can type here", * so it is the one border held to WCAG 1.4.11. At 0.38 it clears 3:1 against * both the field fill and the card behind it; the decorative hairlines above * are separators and are deliberately quieter. */ --pt-border-input: rgba(255, 255, 255, 0.38); --pt-border-gold: rgba(214, 179, 106, 0.34); --pt-border-gold-soft: rgba(214, 179, 106, 0.16); /* ----------------------------------------------------------------- Status. Each is paired with a surface tint for badges. ----------------------------------------------------------------- */ --pt-success: #63d29a; --pt-success-surface: rgba(99, 210, 154, 0.12); --pt-warning: #f0c070; --pt-warning-surface: rgba(240, 192, 112, 0.12); --pt-danger: #f38b8b; --pt-danger-surface: rgba(243, 139, 139, 0.12); --pt-info: #7db6e8; --pt-info-surface: rgba(125, 182, 232, 0.12); /* ----------------------------------------------------------------- Radius. ----------------------------------------------------------------- */ --pt-radius-sm: 10px; --pt-radius-md: 16px; --pt-radius-lg: 22px; --pt-radius-xl: 30px; --pt-radius-pill: 999px; /* ----------------------------------------------------------------- Shadow. Ambient, never a hard drop. ----------------------------------------------------------------- */ --pt-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.32); --pt-shadow-md: 0 18px 42px rgba(0, 0, 0, 0.42); --pt-shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.55); --pt-shadow-premium: 0 20px 48px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 1px 0 0 rgba(255, 255, 255, 0.06) inset; --pt-glow-gold: 0 8px 30px rgba(184, 138, 68, 0.28); --pt-glow-gold-strong: 0 10px 42px rgba(214, 179, 106, 0.4); /* ----------------------------------------------------------------- Rhythm and motion. ----------------------------------------------------------------- */ --pt-space-2xs: 4px; --pt-space-xs: 8px; --pt-space-sm: 12px; --pt-space-md: 20px; --pt-space-lg: 32px; --pt-space-xl: 52px; --pt-space-2xl: 80px; --pt-duration-fast: 150ms; --pt-duration-base: 220ms; --pt-duration-slow: 300ms; --pt-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --pt-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --pt-container: 1240px; --pt-container-wide: 1440px; /* ----------------------------------------------------------------- Type. ----------------------------------------------------------------- */ --pt-font-heading: "Bahnschrift", "Aptos", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; --pt-font-body: "Aptos", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; --pt-font-numeric: "Aptos", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; --pt-tracking-tight: -0.02em; --pt-tracking-wide: 0.14em; /* ----------------------------------------------------------------- Carbon weave. A CSS pattern, not an image asset. ----------------------------------------------------------------- */ --pt-carbon: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.014) 0 1px, rgba(0, 0, 0, 0) 1px 3px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.014) 0 1px, rgba(0, 0, 0, 0) 1px 3px); /* ----------------------------------------------------------------- Legacy aliases. Existing rules keep working; new work uses --pt-*. ----------------------------------------------------------------- */ --color-bg: var(--pt-bg); --color-bg-elevated: var(--pt-bg-elevated); --color-surface: var(--pt-glass-2-solid); --color-surface-hover: var(--pt-bg-raised); --color-text: var(--pt-text); --color-text-muted: var(--pt-text-muted); --color-primary: var(--pt-gold-3); --color-primary-hover: var(--pt-gold-4); --color-success: var(--pt-success); --color-warning: var(--pt-warning); --color-danger: var(--pt-danger); --color-border: var(--pt-border); --radius-sm: var(--pt-radius-sm); --radius-md: var(--pt-radius-md); --radius-lg: var(--pt-radius-lg); --shadow-sm: var(--pt-shadow-sm); --shadow-md: var(--pt-shadow-md); --container-width: var(--pt-container); --font-heading: var(--pt-font-heading); --font-body: var(--pt-font-body); }