/* ============================================================ LEADER HOTELS — DESIGN SYSTEM colors_and_type.css ------------------------------------------------------------ Foundations: color tokens (neutral + accent + semantic), typography (Geist Sans + Geist Mono), spacing, radii, shadows. Dark mode via [data-theme="dark"] on . Brand accent themeable per tenant via --accent override. ============================================================ */ /* --- Fonts ------------------------------------------------- */ /* Geist (Vercel) — modern technical sans-serif, optimized for data-dense UI. Avoids overused families (Inter, Roboto). */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap'); /* ============================================================ 1. NEUTRAL SCALE — Zinc-flavored, slightly cool ============================================================ */ :root { --zinc-0: #ffffff; --zinc-25: #fbfbfa; /* page bg light */ --zinc-50: #f6f6f5; /* subtle panel bg */ --zinc-100: #ececea; /* divider, table hover */ --zinc-150: #dedeDB; /* stronger divider */ --zinc-200: #cdcdc9; /* borders */ --zinc-300: #b0b0ab; /* disabled text */ --zinc-400: #8a8a84; /* placeholder, hint */ --zinc-500: #6a6a64; /* fg muted */ --zinc-600: #4f4f4a; /* fg secondary */ --zinc-700: #383834; /* fg primary on light bg */ --zinc-800: #25251f; /* heading */ --zinc-900: #161611; /* near-black */ --zinc-950: #0a0a08; /* =========================================================== 2. BRAND ACCENT — themeable per tenant (hotel A, B, KFC...) Default: sober professional blue. Override via inline style on or per-tenant stylesheet: for a KFC-themed view. =========================================================== */ --accent: #2563eb; --accent-fg: #ffffff; /* text on accent */ --accent-soft: #eef3ff; /* tinted bg, light mode */ --accent-hover: #1d4fd1; --accent-press: #1840b3; --accent-ring: rgba(37, 99, 235, 0.30); --accent-border: rgba(37, 99, 235, 0.45); /* =========================================================== 3. SEMANTIC — functional colors, restrained saturation =========================================================== */ --success: #10804b; --success-soft: #e6f4ed; --success-border: #b8dcc8; --warning: #a76b1a; --warning-soft: #fbf1de; --warning-border: #ecd4a3; --danger: #b42318; --danger-soft: #fdecea; --danger-border: #f4b6b0; --info: #1d6ec9; --info-soft: #e5f0fb; --info-border: #bcd7f1; /* =========================================================== 4. SEMANTIC SURFACE TOKENS — use these in components, never reach for raw --zinc-* in component CSS. =========================================================== */ --bg-page: var(--zinc-25); --bg-surface: var(--zinc-0); --bg-sunken: var(--zinc-50); --bg-hover: var(--zinc-100); --bg-active: var(--zinc-150); --bg-overlay: rgba(22, 22, 17, 0.45); --fg-1: var(--zinc-800); /* primary text */ --fg-2: var(--zinc-600); /* secondary text */ --fg-3: var(--zinc-500); /* tertiary / metadata */ --fg-4: var(--zinc-400); /* hint / placeholder */ --fg-disabled: var(--zinc-300); --fg-on-accent: var(--accent-fg); --border-subtle: var(--zinc-100); --border-default: var(--zinc-200); --border-strong: var(--zinc-300); --border-focus: var(--accent); /* =========================================================== 5. RADII — sober modern (4–6px) =========================================================== */ --radius-xs: 2px; /* tags inside dense tables */ --radius-sm: 4px; /* inputs, buttons */ --radius-md: 6px; /* cards, dropdowns */ --radius-lg: 8px; /* modals, drawers */ --radius-xl: 12px; /* hero/full-bleed surfaces */ --radius-pill: 999px; /* chips, status dots, avatars */ /* =========================================================== 6. SHADOWS — layered, restrained, never tinted =========================================================== */ --shadow-xs: 0 1px 1px rgba(22, 22, 17, 0.04); --shadow-sm: 0 1px 2px rgba(22, 22, 17, 0.05), 0 1px 1px rgba(22, 22, 17, 0.03); --shadow-md: 0 4px 8px -2px rgba(22, 22, 17, 0.06), 0 2px 4px -2px rgba(22, 22, 17, 0.04); --shadow-lg: 0 10px 20px -6px rgba(22, 22, 17, 0.10), 0 4px 8px -2px rgba(22, 22, 17, 0.05); --shadow-xl: 0 24px 40px -8px rgba(22, 22, 17, 0.14), 0 8px 16px -4px rgba(22, 22, 17, 0.06); /* Inner shadow used on inputs (focus ring is separate) */ --shadow-inset-input: inset 0 1px 1px rgba(22, 22, 17, 0.04); /* Focus ring — 3px halo of accent at 30% alpha */ --ring-focus: 0 0 0 3px var(--accent-ring); /* =========================================================== 7. SPACING — 4px base, half-steps at 2px for table density =========================================================== */ --space-0: 0; --space-px: 1px; --space-0_5: 2px; --space-1: 4px; --space-1_5: 6px; --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; --space-20: 80px; --space-24: 96px; /* =========================================================== 8. SIZING — control heights, table density =========================================================== */ --control-h-sm: 28px; /* compact button, table-action */ --control-h-md: 36px; /* default button, input */ --control-h-lg: 44px; /* primary CTA, touch target */ --row-h-dense: 32px; /* dense table row */ --row-h-default:40px; /* default table row */ --row-h-comfy: 52px; /* comfy table row */ /* =========================================================== 9. TYPOGRAPHY — Geist Sans (UI) + Geist Mono (numbers/code) =========================================================== */ --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Type scale — restrained, 7 sizes total. Line-heights tuned for data-dense UI. */ --fs-2xs: 11px; --lh-2xs: 14px; /* meta labels, table footers */ --fs-xs: 12px; --lh-xs: 16px; /* table cells, badges, hints */ --fs-sm: 13px; --lh-sm: 18px; /* compact UI, sidebar items */ --fs-md: 14px; --lh-md: 20px; /* body / default UI */ --fs-lg: 16px; --lh-lg: 24px; /* emphasized body, drawer title */ --fs-xl: 20px; --lh-xl: 28px; /* page title */ --fs-2xl: 24px; --lh-2xl: 32px; /* large KPI label */ --fs-3xl: 32px; --lh-3xl: 40px; /* KPI number */ --fs-4xl: 40px; --lh-4xl: 48px; /* hero KPI / empty-state */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-caps: 0.06em; /* Tabular numbers — used on all numeric table cells & KPIs */ --num-features: "tnum" 1, "lnum" 1, "ss01" 1; } /* ============================================================ DARK MODE — secondary support, same scale inverted ============================================================ */ [data-theme="dark"] { --bg-page: #0d0d0a; --bg-surface: #161614; --bg-sunken: #1d1d1a; --bg-hover: #25251f; --bg-active: #2e2e28; --bg-overlay: rgba(0, 0, 0, 0.60); --fg-1: #ececea; --fg-2: #c5c5c0; --fg-3: #8e8e88; --fg-4: #6a6a64; --fg-disabled: #4f4f4a; --border-subtle: #25251f; --border-default: #38383a; --border-strong: #4f4f4a; --accent: #5b8def; --accent-soft: rgba(91, 141, 239, 0.12); --accent-hover: #7aa0f2; --accent-press: #4778d8; --accent-ring: rgba(91, 141, 239, 0.35); --accent-border: rgba(91, 141, 239, 0.50); --success: #34c97a; --success-soft: rgba(52, 201, 122, 0.12); --success-border: rgba(52, 201, 122, 0.35); --warning: #e8b34a; --warning-soft: rgba(232, 179, 74, 0.12); --warning-border: rgba(232, 179, 74, 0.35); --danger: #f47269; --danger-soft: rgba(244, 114, 105, 0.12); --danger-border: rgba(244, 114, 105, 0.35); --info: #5b9eef; --info-soft: rgba(91, 158, 239, 0.12); --info-border: rgba(91, 158, 239, 0.35); --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.45); --shadow-lg: 0 10px 20px -6px rgba(0, 0, 0, 0.55); --shadow-xl: 0 24px 40px -8px rgba(0, 0, 0, 0.65); } /* ============================================================ SEMANTIC ELEMENT STYLES — apply on raw HTML elements so untouched markup is already on-brand. ============================================================ */ html, body { font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-md); color: var(--fg-1); background: var(--bg-page); font-feature-settings: "ss01" 1, "cv11" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: var(--fg-1); letter-spacing: var(--tracking-tight); font-weight: var(--fw-semibold); margin: 0; } h1 { font-size: var(--fs-2xl); line-height: var(--lh-2xl); } /* page hero */ h2 { font-size: var(--fs-xl); line-height: var(--lh-xl); } /* section title */ h3 { font-size: var(--fs-lg); line-height: var(--lh-lg); } /* card title */ h4 { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: var(--fw-semibold); } h5 { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold); } h6 { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-3); } p { margin: 0; color: var(--fg-2); } small { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--fg-3); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; font-feature-settings: var(--num-features); } code { background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-xs); padding: 1px 4px; color: var(--fg-1); } kbd { background: var(--bg-surface); border: 1px solid var(--border-default); border-bottom-width: 2px; border-radius: var(--radius-xs); padding: 1px 5px; font-size: var(--fs-2xs); color: var(--fg-2); box-shadow: var(--shadow-xs); } a { color: var(--accent); text-decoration: none; text-underline-offset: 2px; } a:hover { text-decoration: underline; } hr { border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-4) 0; } ::selection { background: var(--accent-soft); color: var(--fg-1); } /* ============================================================ UTILITY CLASSES — used heavily across the kit ============================================================ */ .num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--num-features); } .mono { font-family: var(--font-mono); } .text-2xs { font-size: var(--fs-2xs); line-height: var(--lh-2xs); } .text-xs { font-size: var(--fs-xs); line-height: var(--lh-xs); } .text-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); } .text-md { font-size: var(--fs-md); line-height: var(--lh-md); } .text-lg { font-size: var(--fs-lg); line-height: var(--lh-lg); } .fg-1 { color: var(--fg-1); } .fg-2 { color: var(--fg-2); } .fg-3 { color: var(--fg-3); } .fg-4 { color: var(--fg-4); } .fw-medium { font-weight: var(--fw-medium); } .fw-semibold { font-weight: var(--fw-semibold); } .caps { text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--fg-3); } /* ============================================================ MOTION — restrained, snappy, no bounce. Used for hover, drawer open/close, table sort, toast. ============================================================ */ :root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }