/* ───────────────────────────────────────────────────────────────────── Triumph Dashboards — Design Tokens dashboards.greenvilletriumph.club This is the INTERNAL Triumph design system for screen tools (dashboards, ops surfaces, ticketing/inventory/pricing tools). It is a calmed blend of the strict Triumph brand and a dashboard aesthetic borrowed from design.seantippen.com. For sponsor decks and external/poster work, use the strict brand (brandpad.io/greenville-triumph and design.greenvilletriumph.club). Default mode is dark. Light mode opt-in via . ───────────────────────────────────────────────────────────────────── */ /* ─── FONTS ──────────────────────────────────────────────────────────── */ @font-face { font-family: 'Fabiola Capitals'; src: url('https://design.greenvilletriumph.club/fonts/Fabiola-Capitals.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ─── BRAND REFERENCE PALETTE (raw, do not use directly for chrome) ── */ /* These are the canonical Brandpad values. Available when you NEED them (logo lockups, brand strips), but the dashboards never paint chrome with them, only accents. */ --brand-greenville-blue: #002855; --brand-triumph-green: #61a631; --brand-upstate-fog: #f2fafa; --brand-morning-mist: #d2e6e5; --brand-deep-night: #020022; --brand-electric-lime: #69b3e7; --brand-light-green: #97d700; /* ─── SURFACES ────────────────────────────────────────────────────── */ /* Soft dark slate with a whisper of navy hue (chroma 0.013). NOT near-black, NOT screaming navy. Four lift-steps so cards read as layered above the canvas. */ --color-bg: oklch(0.165 0.013 250); --color-surface: oklch(0.205 0.014 250); --color-surface-hover: oklch(0.245 0.015 250); --color-surface-raised: oklch(0.285 0.016 250); --color-surface-overlay: oklch(0.320 0.017 250); /* ─── TEXT ────────────────────────────────────────────────────────── */ --color-text: oklch(0.940 0.008 250); --color-text-secondary: oklch(0.740 0.008 250); --color-text-muted: oklch(0.550 0.010 250); --color-text-disabled: oklch(0.400 0.010 250); --text-alpha-90: oklch(0.940 0.008 250 / 0.9); --text-alpha-70: oklch(0.940 0.008 250 / 0.7); --text-alpha-50: oklch(0.940 0.008 250 / 0.5); --text-alpha-30: oklch(0.940 0.008 250 / 0.3); --text-alpha-15: oklch(0.940 0.008 250 / 0.15); /* ─── BORDERS ─────────────────────────────────────────────────────── */ --color-border: oklch(1 0 0 / 0.07); --color-border-emphasis: oklch(1 0 0 / 0.14); --color-border-strong: oklch(1 0 0 / 0.22); /* ─── ACCENTS ─────────────────────────────────────────────────────── */ /* Triumph green at exact Brandpad chroma. The new slate canvas is calm enough that brand-accurate saturation (#61a631, chroma 0.182, hue 138) reads as Triumph without dominating. Hover slightly brighter for affordance. */ --color-accent: oklch(0.625 0.182 138); /* #61a631 — Triumph green, exact brand */ --color-accent-hover: oklch(0.690 0.182 138); --accent-muted: oklch(0.625 0.182 138 / 0.20); --accent-subtle: oklch(0.625 0.182 138 / 0.09); /* Decorative palette per global rules: green, royal blue, coral, soft purple. NO lime, NO yellow as decoration. Secondary shifted to hue 260 so it sits in the Greenville Blue family rather than a generic royal. Coral and soft purple stay as Sean's blend (they don't exist in the brand kit). */ --color-secondary: oklch(0.680 0.150 260); /* Greenville-blue-family, lightened to read on dark */ --color-tertiary: oklch(0.740 0.160 32); /* coral */ --color-quaternary: oklch(0.720 0.130 305); /* soft purple */ /* ─── STATUS ──────────────────────────────────────────────────────── */ --color-success: oklch(0.720 0.150 145); --color-warning: oklch(0.780 0.140 80); --color-danger: oklch(0.680 0.180 25); --color-info: oklch(0.700 0.130 232); --color-success-subtle: oklch(0.230 0.045 145); --color-warning-subtle: oklch(0.240 0.055 80); --color-danger-subtle: oklch(0.230 0.055 25); --color-info-subtle: oklch(0.230 0.050 232); /* ─── SHADOWS ─────────────────────────────────────────────────────── */ /* Calibrated for the new slate bg (lighter than seantippen's near- black, so shadows can be slightly softer without disappearing). */ --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.28); --shadow-md: 0 4px 12px oklch(0 0 0 / 0.36); --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.46); --shadow-ring: 0 0 0 0.5px oklch(1 0 0 / 0.08); --shadow-float: 0 4px 20px oklch(0 0 0 / 0.32), var(--shadow-ring); --shadow-float-lg: 0 12px 40px oklch(0 0 0 / 0.40), var(--shadow-ring); /* ─── FOCUS ───────────────────────────────────────────────────────── */ --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent); /* ─── DATA SERIES (Chart.js hex literals) ─────────────────────────── */ /* Use these hex values via tok('--green') etc. for Chart.js datasets. Same palette family as design.seantippen.com so charts feel consistent across the personal hub and Triumph dashboards. */ --green: #4CC97A; --blue: #6BA3FF; --red: #F28878; --amber: #D4AD42; --purple: #C688E0; --cyan: #4BC3CA; --yellow: #E8D44D; --orange: #E89B4D; /* ─── TYPOGRAPHY ──────────────────────────────────────────────────── */ /* CRITICAL: Fabiola is reserved for h1 / .h-display ONLY. Every other heading and all body copy uses Inter. This is the #1 fix vs. design.greenvilletriumph.club, which spread Fabiola across h1/h2/h3 and made every dashboard look like a poster. */ --font-display: 'Fabiola Capitals', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace; --text-xs: clamp(0.6875rem, 0.625rem + 0.25vw, 0.8125rem); --text-sm: clamp(0.8125rem, 0.75rem + 0.25vw, 0.9375rem); --text-base: clamp(0.9375rem, 0.875rem + 0.25vw, 1.0625rem); --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --text-xl: clamp(1.375rem, 1.125rem + 1vw, 1.875rem); --text-2xl: clamp(1.75rem, 1.375rem + 1.5vw, 2.625rem); --text-3xl: clamp(2.25rem, 1.625rem + 2.5vw, 3.5rem); --text-4xl: clamp(2.75rem, 1.875rem + 3.5vw, 4.5rem); --text-display: clamp(3.2rem, 2rem + 6vw, 8.7rem); /* 8.7rem max per Brandpad H1 (139.2px) */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extra: 800; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; --measure: 65ch; /* ─── SPACING ─────────────────────────────────────────────────────── */ /* Dashboard-tuned (NOT poster-tuned). Section padding tops out at ~6rem, not 4.25rem of poster room. Interior rhythm tight. */ --space-xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem); --space-sm: clamp(0.5rem, 0.4rem + 0.4vw, 0.875rem); --space-md: clamp(1rem, 0.875rem + 0.5vw, 1.5rem); --space-lg: clamp(1.5rem, 1.25rem + 1vw, 2.5rem); --space-xl: clamp(2rem, 1.5rem + 2vw, 4rem); --space-section: clamp(3rem, 2rem + 5vw, 6rem); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* ─── MOTION ──────────────────────────────────────────────────────── */ --duration-instant: 80ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ─── RADIUS ──────────────────────────────────────────────────────── */ /* Sharp edges (0) everywhere except pills (--radius-full). One small exception: --radius-cta = 2px for soft-pill CTAs when Triumph deck conventions ask for it. Use sparingly. */ --radius-xs: 0; --radius-sm: 0; --radius-md: 0; --radius: 0; --radius-lg: 0; --radius-xl: 0; --radius-cta: 2px; --radius-full: 9999px; /* ─── LAYOUT ──────────────────────────────────────────────────────── */ --max-width: 1180px; --sidebar-w: 260px; /* ─── COMPATIBILITY ALIASES ───────────────────────────────────────── */ /* So Triumph-side code that copied alias names from sean's personal system keeps working without rename. */ --bg: var(--color-bg); --surface: var(--color-surface); --surface2: var(--color-surface-hover); --surface3: var(--color-surface-raised); --surface-hover: var(--color-surface-hover); --text: var(--color-text); --text-dim: var(--color-text-secondary); --text-muted: var(--color-text-muted); --text-secondary: var(--color-text-secondary); --text-disabled: var(--color-text-disabled); --accent: var(--color-accent); --accent2: var(--color-secondary); --secondary: var(--color-secondary); --border: var(--color-border); --border-emphasis: var(--color-border-emphasis); } /* ─── LIGHT MODE ─────────────────────────────────────────────────────── */ html.light { --color-bg: oklch(0.965 0.006 250); /* soft warm off-white */ --color-surface: oklch(1 0 0); --color-surface-hover: oklch(0.948 0.005 250); --color-surface-raised: oklch(1 0 0); --color-surface-overlay: oklch(1 0 0); --color-text: oklch(0.180 0.018 250); --color-text-secondary: oklch(0.380 0.014 250); --color-text-muted: oklch(0.520 0.010 250); --color-text-disabled: oklch(0.680 0.006 250); --text-alpha-90: oklch(0.180 0.018 250 / 0.9); --text-alpha-70: oklch(0.180 0.018 250 / 0.7); --text-alpha-50: oklch(0.180 0.018 250 / 0.5); --text-alpha-30: oklch(0.180 0.018 250 / 0.3); --text-alpha-15: oklch(0.180 0.018 250 / 0.15); --color-border: oklch(0 0 0 / 0.09); --color-border-emphasis: oklch(0 0 0 / 0.16); --color-border-strong: oklch(0 0 0 / 0.24); --color-accent: oklch(0.520 0.182 138); /* Brand green darkened slightly for light-mode legibility */ --color-accent-hover: oklch(0.470 0.182 138); --accent-muted: oklch(0.520 0.182 138 / 0.16); --accent-subtle: oklch(0.520 0.182 138 / 0.07); --color-secondary: oklch(0.420 0.180 260); /* Greenville-blue-family darkened for light mode */ --color-tertiary: oklch(0.560 0.170 32); --color-quaternary: oklch(0.500 0.150 305); --color-success: oklch(0.520 0.150 145); --color-warning: oklch(0.580 0.140 80); --color-danger: oklch(0.520 0.180 25); --color-info: oklch(0.520 0.130 232); --color-success-subtle: oklch(0.940 0.035 145); --color-warning-subtle: oklch(0.950 0.040 80); --color-danger-subtle: oklch(0.940 0.045 25); --color-info-subtle: oklch(0.940 0.038 232); --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.06); --shadow-md: 0 4px 12px oklch(0 0 0 / 0.08); --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.12); --green: #2D8E52; --blue: #3B78D0; --red: #D04F3D; --amber: #A88520; --purple: #9B55B5; --cyan: #2A96A0; --yellow: #B8A620; --orange: #B87620; }