/* ============================================================= A.C.E TENNIS — Core tokens (colors + typography) ---------------------------------------------------------------- Brand law: 90% clean (navy + white) / 10% impact (green + accents) Primary font: Arial / Helvetica Neue stack (system-safe). ============================================================= */ :root { /* -- Brand: primary -- */ --ace-navy: #222937; /* main background, sections, headers */ --ace-white: #FFFFFF; /* primary text on navy, surfaces */ --ace-green: #026844; /* brand accent — buttons, anchors */ /* -- Brand: accents (use sparingly, ~10%) -- */ --ace-lime: #B4FA1E; /* energy, callouts, performance highlights */ --ace-gold: #D4AF37; /* premium, elite programs, tours */ /* -- Navy scale (derived) -- */ --navy-900: #14181F; /* deepest — overlays, footers */ --navy-800: #1A1F29; --navy-700: #222937; /* = --ace-navy, base */ --navy-600: #2D3647; --navy-500: #3B475C; --navy-400: #5A6678; /* muted text on dark */ --navy-300: #8A93A2; /* tertiary text on dark */ --navy-200: #C9CED6; /* hairlines on light */ --navy-100: #E6E9EE; /* light surface tint */ --navy-050: #F4F6F8; /* lightest surface */ /* -- Green scale (derived) -- */ --green-900: #013722; --green-800: #014F33; --green-700: #026844; /* = --ace-green, base */ --green-600: #048256; --green-500: #0DA06D; --green-200: #B7E5D0; /* tints for surfaces */ --green-100: #E2F4EC; /* -- Semantic foreground (default surface = navy) -- */ --fg-1: var(--ace-white); /* primary text on navy */ --fg-2: #C9CED6; /* secondary text on navy */ --fg-3: #8A93A2; /* tertiary / metadata */ --fg-muted: #5A6678; /* hairline labels */ --fg-on-light: var(--ace-navy); /* primary text on white */ --fg-on-light-2: #3B475C; /* secondary on white */ --fg-on-light-3: #5A6678; /* tertiary on white */ --fg-accent: var(--ace-green); /* anchor / brand accent text */ --fg-energy: var(--ace-lime); --fg-premium: var(--ace-gold); /* -- Semantic backgrounds -- */ --bg-base: var(--ace-navy); /* default app background */ --bg-elevated: #2D3647; /* cards on navy */ --bg-deepest: var(--navy-900); /* footer / overlays */ --bg-surface: var(--ace-white); /* light surface */ --bg-surface-2: #F4F6F8; /* light surface tint */ --bg-accent: var(--ace-green); --bg-energy: var(--ace-lime); /* -- Border / hairline -- */ --border-on-dark: rgba(255, 255, 255, 0.10); --border-on-dark-strong: rgba(255, 255, 255, 0.22); --border-on-light: #E6E9EE; --border-on-light-strong: #C9CED6; --border-accent: var(--ace-green); /* -- States -- */ --green-hover: #048256; /* green pressable hover */ --green-press: #014F33; /* green pressable active */ --hover-lift-on-dark: rgba(255, 255, 255, 0.06); --hover-lift-on-light: rgba(34, 41, 55, 0.04); /* -- Status (kept tonally restrained) -- */ --status-success: var(--ace-green); --status-warning: var(--ace-gold); --status-error: #C8443B; --status-info: #4A7AB8; /* ========================================================= TYPOGRAPHY Arial is the brand primary. We stack toward Helvetica Neue and a Google Fonts fallback (Arimo) for environments where Arial may not be installed. ========================================================= */ --font-sans: "Arial", "Helvetica Neue", "Helvetica", "Arimo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-display: var(--font-sans); /* same family, heavier weight */ --font-body: var(--font-sans); --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace; /* Weights: Arial offers Regular + Bold; we map heavier weights to Bold. */ --fw-regular: 400; --fw-medium: 700; /* Arial has no medium — uses Bold */ --fw-bold: 700; --fw-black: 900; /* Type scale — sized for performance/marketing density. Headings are loud, tight, and uppercase-friendly. */ --fs-display-xl: 96px; /* hero, full-bleed posters */ --fs-display-l: 72px; --fs-display-m: 56px; --fs-h1: 44px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px; --fs-eyebrow: 13px; /* uppercase labels above headings */ --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-overline: 11px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.5; --lh-loose: 1.65; --ls-tight: -0.02em; /* big display */ --ls-snug: -0.01em; --ls-normal: 0; --ls-wide: 0.08em; /* eyebrow / label */ --ls-button: 0.06em; /* uppercase CTA */ /* ========================================================= SHAPE & SPACE ========================================================= */ --radius-0: 0px; /* hard, sharp — performance/serious */ --radius-1: 2px; --radius-2: 4px; /* default for buttons + inputs */ --radius-3: 8px; /* cards */ --radius-4: 16px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ========================================================= SHADOW / ELEVATION Restrained on dark surfaces; mostly used on light cards. ========================================================= */ --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.08); --shadow-md: 0 4px 14px rgba(20, 24, 31, 0.10); --shadow-lg: 0 14px 36px rgba(20, 24, 31, 0.16); --shadow-xl: 0 28px 64px rgba(20, 24, 31, 0.22); --shadow-inset-hairline: inset 0 0 0 1px var(--border-on-light); --shadow-focus-green: 0 0 0 3px rgba(2, 104, 68, 0.30); --shadow-focus-lime: 0 0 0 3px rgba(180, 250, 30, 0.45); } /* ============================================================= Semantic element styles — opt-in via class or scoped reset ============================================================= */ .ace-type-display-xl, .ace h1.display { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-transform: uppercase; } .ace-type-display-l { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display-l); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-transform: uppercase; } .ace-type-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); } .ace-type-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); } .ace-type-h3 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-snug); } .ace-type-h4 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-snug); } .ace-type-eyebrow { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-eyebrow); line-height: 1; letter-spacing: var(--ls-wide); text-transform: uppercase; } .ace-type-body-lg { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body-lg); line-height: var(--lh-loose); } .ace-type-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-base); } .ace-type-body-sm { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body-sm); line-height: var(--lh-base); } .ace-type-caption { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-caption); line-height: var(--lh-base); color: var(--fg-3); } .ace-type-button { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); letter-spacing: var(--ls-button); text-transform: uppercase; } /* Optional Google Fonts substitute for Arial when local Arial is missing. Arimo is metrically compatible with Arial. Pull it in if you need pixel-faithful rendering across non-Arial systems. */ @import url("https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&display=swap");