/* ================================================================ H2GO Design System — Foundational Tokens Source: beomph/h2go-supply-platform Single source of truth for all color, type, spacing, and motion tokens. Component styles live in styles.css / dashboard.css. Two themes ship together: dark (default) and light. The platform defaults to dark; users can toggle via .theme-toggle-switch. Outfit font is loaded via in HTML — no @import here. ================================================================ */ /* ================================================================ COLOR TOKENS — Dark theme (default) ================================================================ */ :root, .theme-dark, body.theme-dark { /* Brand */ --h2-blue: #3B82F6; /* Primary — "H2" letters, primary buttons, accents */ --h2-blue-light: #60A5FA; /* Hover-soft, glows */ --h2-blue-dark: #2563EB; /* Primary button hover, pressed states */ --go-gray: #6B7280; /* "GO" letters, secondary button */ --go-gray-dark: #4B5563; /* Secondary hover */ /* Surfaces */ --bg-black: #0c0c0e; /* App background */ --bg-dark: #141416; /* Secondary surface (between cards) */ --bg-card: #18181b; /* Card surface */ /* Text */ --text-primary: #f8fafc; /* Headings, numerics, key accents */ --text-white: #f8fafc; /* Body */ --text-muted: #94a3b8; /* Labels, captions, helpers */ /* Lines & overlays */ --border-color: #2e2e33; --surface-overlay: rgba(12, 12, 14, 0.92); /* Sticky navbars */ --surface-soft: rgba(255, 255, 255, 0.04); --surface-soft-border: rgba(255, 255, 255, 0.08); --surface-deep: rgba(15, 23, 42, 0.72); --surface-deep-strong: rgba(15, 23, 42, 0.86); --field-readonly: rgba(10, 10, 10, 0.60); /* Ambient glow (body::before / ::after radial blurs) */ --ambient-primary: rgba(59, 130, 246, 0.12); --ambient-secondary: rgba(96, 165, 250, 0.08); --ambient-grid: rgba(148, 163, 184, 0.06); /* Elevation */ --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 40px rgba(0, 0, 0, 0.22); --shadow-glow-primary: 0 4px 16px rgba(59, 130, 246, 0.28); --shadow-fab: 0 8px 24px rgba(37, 99, 235, 0.35); /* Shape */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; --radius-pill: 999px; /* Semantic status (badges / progress / banners) */ --status-success: #6cd97e; --status-success-bg: rgba(108, 217, 126, 0.12); --status-success-bd: rgba(108, 217, 126, 0.40); --status-warn: #fbbf24; --status-warn-bg: rgba(251, 191, 36, 0.12); --status-warn-bd: rgba(251, 191, 36, 0.40); --status-danger: #ff8585; --status-danger-bg: rgba(255, 133, 133, 0.12); --status-danger-bd: rgba(255, 133, 133, 0.40); --status-info: #5b9dff; /* Driver app blue (slightly cooler) */ --status-info-bg: rgba(91, 157, 255, 0.15); --status-info-bd: rgba(91, 157, 255, 0.30); --status-cancel: #fb923c; --status-cancel-bg: rgba(249, 115, 22, 0.18); --status-cancel-bd: rgba(249, 115, 22, 0.45); /* Driver surface (mobile dashboard uses a deeper navy) */ --driver-bg: #0d1426; --driver-bg-elev: #0f1c34; --driver-fg: #e7e9f0; } /* ================================================================ COLOR TOKENS — Light theme override Same tonal logic, inverted brightness. ================================================================ */ body.theme-light { --text-primary: #0f172a; --bg-black: #f4f6fa; --bg-dark: #eceff5; --bg-card: #ffffff; --text-white: #0f172a; --text-muted: #64748b; --border-color: #dfe3eb; --surface-overlay: rgba(255, 255, 255, 0.92); --surface-soft: rgba(37, 99, 235, 0.05); --surface-soft-border: rgba(148, 163, 184, 0.18); --surface-deep: rgba(226, 232, 240, 0.95); --surface-deep-strong: rgba(203, 213, 225, 0.95); --field-readonly: rgba(226, 232, 240, 0.95); --ambient-primary: rgba(59, 130, 246, 0.08); --ambient-secondary: rgba(56, 189, 248, 0.06); --ambient-grid: rgba(148, 163, 184, 0.08); --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 10px 32px rgba(15, 23, 42, 0.06); } /* ================================================================ THEME-AGNOSTIC TOKENS (define once in :root only) Spacing, motion, type — not theme-dependent. ================================================================ */ :root { /* Typography */ --font-sans: 'Outfit', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Numeric weights */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-black: 800; /* Type ramp */ --fs-xs: 0.72rem; --fs-sm: 0.85rem; --fs-base: 1.00rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.50rem; --fs-2xl: 2.00rem; --fs-3xl: 3.00rem; /* Hero scales — fluid on landing */ --fs-hero-sub: clamp(1.50rem, 3vw, 2.00rem); --fs-hero-title: clamp(2.00rem, 5vw, 3.00rem); --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.60; --lh-loose: 1.80; --tracking-tight: -0.02em; --tracking-base: 0; --tracking-wide: 0.02em; --tracking-eyebrow: 0.04em; /* Spacing scale (rem-based) */ --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; --space-24: 6rem; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 0.15s; --dur-med: 0.20s; --dur-slow: 0.38s; --dur-progress: 0.55s; } /* ================================================================ SEMANTIC TYPE — drop-in classes Use these instead of restyling tags ad-hoc. ================================================================ */ .h2go-h1, .h2go-h-display { font-family: var(--font-sans); font-size: var(--fs-hero-title); font-weight: var(--w-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--text-white); } .h2go-h2 { font-family: var(--font-sans); font-size: var(--fs-2xl); font-weight: var(--w-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--text-white); } .h2go-h3 { font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: var(--w-semibold); line-height: var(--lh-snug); color: var(--text-white); } .h2go-h4 { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: var(--w-semibold); line-height: var(--lh-snug); color: var(--text-white); } .h2go-body { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--w-regular); line-height: var(--lh-base); color: var(--text-white); } .h2go-body-muted { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--w-regular); line-height: var(--lh-base); color: var(--text-muted); } .h2go-caption { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--w-regular); line-height: var(--lh-snug); color: var(--text-muted); } .h2go-label { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--w-medium); color: var(--text-muted); } .h2go-eyebrow { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); } .h2go-numeric { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Brand mark — H2 in primary blue, GO in neutral gray. */ .h2go-brand-mark { display: inline-flex; align-items: baseline; font-family: var(--font-sans); font-weight: var(--w-black); line-height: 1; letter-spacing: var(--tracking-tight); user-select: none; } .h2go-brand-mark .brand-h2 { color: var(--h2-blue); } .h2go-brand-mark .brand-go { color: var(--go-gray); } .h2go-brand-mark--xl { font-size: var(--fs-3xl); } .h2go-brand-mark--lg { font-size: var(--fs-2xl); } .h2go-brand-mark--md { font-size: var(--fs-lg); } .h2go-brand-mark--sm { font-size: var(--fs-md); }