Developer
134 lines
3.1 KiB
CSS
134 lines
3.1 KiB
CSS
/*
|
|
* Headquarter Design Tokens
|
|
*
|
|
* Naming convention:
|
|
* --space-* : 4px-based spacing scale (1 = 4px, 2 = 8px, ...)
|
|
* --font-size-* : fluid type scale from xs to 2xl
|
|
* --line-height-* : text leading scale
|
|
* --radius-* : corner radius scale
|
|
* --shadow-* : elevation shadows
|
|
* --bp-* : responsive breakpoints
|
|
* --touch-target : minimum interactive control size
|
|
* --sidebar-width : desktop sidebar width
|
|
* --mobile-nav-height : bottom nav including safe-area inset
|
|
*/
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
font-family: "Inter", "IBM Plex Sans", "Segoe UI", sans-serif;
|
|
--bg: #f4f1ea;
|
|
--panel: #fffef9;
|
|
--ink: #1d1d1b;
|
|
--muted: #5f5b55;
|
|
--brand: #275d4b;
|
|
--brand-strong: #154236;
|
|
--border: #d8d0c5;
|
|
--primary: #275d4b;
|
|
--primary-fg: #fffef9;
|
|
--color-primary: #275d4b;
|
|
--success: #2f8f62;
|
|
--success-light: rgba(47, 143, 98, 0.14);
|
|
--warning: #c08a1e;
|
|
--warning-light: rgba(192, 138, 30, 0.14);
|
|
--danger: #b94a3c;
|
|
--danger-light: rgba(185, 74, 60, 0.14);
|
|
--info: #4f7fb8;
|
|
--info-light: rgba(79, 127, 184, 0.14);
|
|
|
|
/* Spacing Scale (4px base) */
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.5rem;
|
|
--space-6: 2rem;
|
|
--space-7: 2.5rem;
|
|
--space-8: 3rem;
|
|
--space-9: 5rem;
|
|
--space-10: 4rem;
|
|
--space-12: 6rem;
|
|
|
|
/* Border Radius */
|
|
--radius-sm: 6px;
|
|
--radius-md: 10px;
|
|
--radius-lg: 14px;
|
|
--radius-xl: 16px;
|
|
--radius-full: 999px;
|
|
|
|
/* Line Height */
|
|
--line-height-tight: 1.25;
|
|
--line-height-normal: 1.5;
|
|
--line-height-relaxed: 1.75;
|
|
|
|
/* Shadow / Elevation */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
--shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.18);
|
|
|
|
/* Layout & Touch */
|
|
--touch-target: 44px;
|
|
--sidebar-width: 280px;
|
|
--mobile-nav-height: calc(64px + env(safe-area-inset-bottom, 0px));
|
|
|
|
/* Breakpoints */
|
|
--bp-sm: 480px;
|
|
--bp-md: 768px;
|
|
--bp-lg: 1024px;
|
|
--bp-xl: 1280px;
|
|
|
|
/* Fluid Typography */
|
|
--font-size-xs: clamp(0.625rem, 0.6rem + 0.125vw, 0.75rem);
|
|
--font-size-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
|
|
--font-size-base: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
|
|
--font-size-lg: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
|
|
--font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
|
|
--font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
--bg: #171613;
|
|
--panel: #22201d;
|
|
--ink: #ece7df;
|
|
--muted: #a59d92;
|
|
--brand: #5fa889;
|
|
--brand-strong: #4d9175;
|
|
--border: #39342d;
|
|
--primary: #5fa889;
|
|
--primary-fg: #171613;
|
|
--color-primary: #5fa889;
|
|
--success: #22c55e;
|
|
--success-light: rgba(34, 197, 94, 0.15);
|
|
--warning: #f59e0b;
|
|
--warning-light: rgba(245, 158, 11, 0.15);
|
|
--danger: #ef4444;
|
|
--danger-light: rgba(239, 68, 68, 0.15);
|
|
--info: #3b82f6;
|
|
--info-light: rgba(59, 130, 246, 0.15);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
}
|
|
|
|
html.terminal-page-open,
|
|
body.terminal-page-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
[data-theme="dark"] body {
|
|
background: radial-gradient(circle at top right, #2a2520, var(--bg));
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|