/* ============================================================================
BetPrince — Foundations: Color & Type
Minimal, modern, dark-first football betting.
Import this file anywhere you build BetPrince UI.
Fonts load from Google Fonts CDN (see @import below). To go fully offline,
drop the .woff2 files into ./fonts/ and swap the @import for @font-face.
============================================================================ */
/* Fonts are loaded via in index.html for faster parallel download.
Keep the tag and the families in --font-display / --font-text in sync. */
:root {
/* ---------------------------------------------------------------------------
COLOR — Surfaces (dark-first)
A near-black stack. Each step up = closer to the user (more elevated).
--------------------------------------------------------------------------- */
--bg-base: #0A0A0C; /* app background, behind everything */
--bg-surface: #121216; /* cards, lists, sheets */
--bg-elevated: #1A1A20; /* raised cards, menus, active rows */
--bg-input: #1F1F26; /* fields, steppers, segmented controls */
--bg-hover: #24242C; /* row / item hover */
/* COLOR — Foreground (text on dark) */
--fg-1: #F4F4F6; /* primary text, headings */
--fg-2: #A6A6B2; /* secondary text, labels */
--fg-3: #6C6C78; /* tertiary, captions, placeholder */
--fg-4: #44444E; /* disabled, faint dividers-as-text */
/* COLOR — Brand accent (coral-red) */
--accent: #FF4D2E; /* primary action: place bet, brand */
--accent-hover: #FF6A50; /* hover (lighter) */
--accent-press: #E63D20; /* press (darker) */
--accent-weak: rgba(255, 77, 46, 0.14); /* tints, selected bg */
--accent-fg: #FFFFFF; /* text/icon on accent */
/* COLOR — Royal touch (BetPrince crown). Used sparingly: VIP, boosts. */
--royal: #E8B53D; /* warm gold */
--royal-weak: rgba(232, 181, 61, 0.14);
/* COLOR — Semantic (odds & outcomes) */
--up: #2CD980; /* odds drifting up / win / positive */
--up-weak: rgba(44, 217, 128, 0.14);
--down: #FF4D5E; /* odds shortening / loss / negative */
--down-weak: rgba(255, 77, 94, 0.14);
--live: #FF4D2E; /* LIVE indicator (shares accent hue) */
--info: #4C8DFF; /* informational, links */
/* COLOR — Lines & strokes */
--line: rgba(255, 255, 255, 0.07); /* default hairline divider */
--line-strong: rgba(255, 255, 255, 0.12); /* card borders, emphasis */
--line-focus: var(--accent); /* focus ring */
/* ---------------------------------------------------------------------------
TYPE — Families
1xBet-style: Roboto Condensed for display/headers/team names (narrow,
sportsbook-feel — fits more text per row), Roboto for body text + odds.
--------------------------------------------------------------------------- */
--font-display: 'Roboto Condensed', 'Roboto', 'Noto Sans', ui-sans-serif, system-ui, sans-serif;
--font-text: 'Roboto', 'Noto Sans', ui-sans-serif, system-ui, sans-serif;
--font-num: 'Roboto', 'Noto Sans', ui-monospace, monospace; /* odds, scores */
/* tabular + lining figures */
--tnum: "tnum" 1, "lnum" 1; /* @kind font */
/* TYPE — Weights */
--w-regular: 400; /* @kind font */
--w-medium: 500; /* @kind font */
--w-semi: 600; /* @kind font */
--w-bold: 700; /* @kind font */
--w-black: 800; /* @kind font */
/* TYPE — Scale (mobile-first; rem base = 16px) */
--text-2xs: 0.6875rem; /* 11 — micro labels, badges */
--text-xs: 0.75rem; /* 12 — captions, meta */
--text-sm: 0.875rem; /* 14 — secondary body, list meta */
--text-md: 1rem; /* 16 — body default */
--text-lg: 1.125rem; /* 18 — emphasized body, list titles */
--text-xl: 1.375rem; /* 22 — section headers */
--text-2xl: 1.75rem; /* 28 — screen titles */
--text-3xl: 2.25rem; /* 36 — hero / big numbers */
--text-4xl: 3rem; /* 48 — marketing display */
--leading-tight: 1.1;
--leading-snug: 1.25;
--leading-normal: 1.45;
--tracking-tight: -0.02em;
--tracking-flat: -0.01em;
--tracking-wide: 0.04em; /* uppercase eyebrows */
--tracking-caps: 0.08em; /* small all-caps labels */
/* ---------------------------------------------------------------------------
SPACING — 4px base grid
--------------------------------------------------------------------------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* RADII — soft but not pill-everything; airy & modern */
--radius-xs: 6px; /* chips, small tags */
--radius-sm: 10px; /* buttons, inputs */
--radius-md: 14px; /* cards, rows */
--radius-lg: 20px; /* sheets, large cards */
--radius-xl: 28px; /* bottom sheets, modals */
--radius-full: 999px;
/* ELEVATION — dark UI leans on subtle borders + soft shadow, not heavy drop */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
--shadow-md: 0 6px 20px rgba(0,0,0,0.45);
--shadow-lg: 0 16px 48px rgba(0,0,0,0.55);
--shadow-accent: 0 8px 28px rgba(255, 77, 46, 0.32); /* glow under primary CTA */
/* MOTION — quick, confident, no bounce. Trustworthy = crisp. */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
--dur-fast: 120ms; /* @kind other */
--dur-base: 200ms; /* @kind other */
--dur-slow: 320ms; /* @kind other */
}
/* ============================================================================
SEMANTIC TYPE CLASSES — apply directly or copy the rules into components
============================================================================ */
.bp-display {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--text-4xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg-1);
}
.bp-h1 {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--text-2xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg-1);
}
.bp-h2 {
font-family: var(--font-display);
font-weight: var(--w-semi);
font-size: var(--text-xl);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-flat);
color: var(--fg-1);
}
.bp-h3 {
font-family: var(--font-text);
font-weight: var(--w-bold);
font-size: var(--text-lg);
line-height: var(--leading-snug);
color: var(--fg-1);
}
.bp-body {
font-family: var(--font-text);
font-weight: var(--w-regular);
font-size: var(--text-md);
line-height: var(--leading-normal);
color: var(--fg-1);
}
.bp-body-sm {
font-family: var(--font-text);
font-weight: var(--w-regular);
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--fg-2);
}
.bp-label {
font-family: var(--font-text);
font-weight: var(--w-semi);
font-size: var(--text-sm);
line-height: 1.2;
color: var(--fg-1);
}
.bp-caption {
font-family: var(--font-text);
font-weight: var(--w-medium);
font-size: var(--text-xs);
line-height: 1.3;
color: var(--fg-3);
}
/* Eyebrow / all-caps micro label */
.bp-eyebrow {
font-family: var(--font-text);
font-weight: var(--w-bold);
font-size: var(--text-2xs);
line-height: 1;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--fg-3);
}
/* Numeric — odds, scores, prices. Always tabular. */
.bp-odds {
font-family: var(--font-num);
font-weight: var(--w-semi);
font-size: var(--text-md);
font-feature-settings: var(--tnum);
letter-spacing: var(--tracking-flat);
color: var(--fg-1);
}
.bp-score {
font-family: var(--font-num);
font-weight: var(--w-bold);
font-size: var(--text-2xl);
font-feature-settings: var(--tnum);
letter-spacing: var(--tracking-tight);
color: var(--fg-1);
}