/* ========================================================= ESHYFT — Design Tokens (Variable Scales) Source: Variable Scales.pdf (Mobile / Desktop FM / Desktop Admin) + src/app/globals.css (color tokens) Breakpoints: Mobile → Ubuntu Desktop (FM) → Ubuntu (facility-manager webapp) Desktop (Admin)→ Inter (Data Agent — this project) Switch via [data-surface="mobile" | "fm" | "admin"] on . Default = admin. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Ubuntu:wght@300;400;500;700&display=swap'); :root { /* ---------- Font families (defaults = Admin / Inter) ---------- */ --font-family-heading: 'Ubuntu', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-family-base: 'Ubuntu', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-sans: var(--font-family-base); --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* ---------- Font weights ---------- */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-caps-regular: 400; --font-weight-caps-medium: 500; /* ---------- Font sizes — Desktop (Admin) ---------- */ --font-size-h1: 24px; --font-size-h2: 20px; --font-size-xl: 30px; --font-size-lg: 18px; --font-size-md: 16px; --font-size-sm: 14px; --font-size-xs: 13px; --font-size-macro: 10px; /* ---------- Line heights ---------- */ --font-height-xl: 30px; --font-height-lg: 26px; --font-height-md: 22px; --font-height-sm: 18px; --font-height-xs: 16px; --font-height-xxs: 14px; --font-height-macro: 12px; /* ---------- Brand & primary (unchanged) ---------- */ --color-primary: #3399FF; --color-primary-hover: #2E8AE5; --color-primary-tint: #E1EFFE; /* ---------- Semantic ---------- */ --color-success: #10B981; --color-success-tint: #D1FAE5; --color-warning: #F59E0B; --color-warning-tint: #FEF3C7; --color-danger: #EF4444; --color-danger-tint: #FEE2E2; --color-info: #428DFF; --color-info-tint: #E1EFFE; /* ---------- Text ---------- */ --color-text-title: #1F2937; --color-text: #4B5563; --color-text-secondary: #6B7280; --color-text-placeholder: #9CA3AF; /* ---------- Borders ---------- */ --color-border-base: #D1D5DB; --color-border-active: #3399FF; /* ---------- Backgrounds / Surfaces ---------- */ --color-bg: #FFFFFF; --color-bg-shade: #F9FAFB; --color-bg-shade-secondary: #F3F4F6; --color-bg-secondary: #E1EFFE; --color-surface: #FFFFFF; --color-surface-hover: #F9FAFB; --color-header-bg: #FFFFFF; --color-header-shadow: rgba(0, 79, 147, 0.10); /* ---------- Layout ---------- */ --app-topbar-h: 52px; /* ---------- Chat bubbles ---------- */ --chat-user-bubble-bg: #E1EFFE; --chat-user-bubble-fg: #1F2937; --chat-user-bubble-border: #3399FF; /* ---------- Composed type tokens (family + weight + size/height) ---------- */ --text-h1: var(--font-weight-bold) var(--font-size-h1)/var(--font-height-xl) var(--font-family-heading); --text-h2: var(--font-weight-bold) var(--font-size-h2)/var(--font-height-lg) var(--font-family-heading); --text-xl: var(--font-weight-bold) var(--font-size-xl)/var(--font-height-xl) var(--font-family-heading); --text-lg: var(--font-weight-medium) var(--font-size-lg)/var(--font-height-md) var(--font-family-base); --text-md: var(--font-weight-regular) var(--font-size-md)/var(--font-height-md) var(--font-family-base); --text-sm: var(--font-weight-regular) var(--font-size-sm)/var(--font-height-sm) var(--font-family-base); --text-xs: var(--font-weight-regular) var(--font-size-xs)/var(--font-height-xs) var(--font-family-base); --text-macro: var(--font-weight-regular) var(--font-size-macro)/var(--font-height-macro) var(--font-family-base); /* Aliases kept for older preview cards */ --text-display: var(--font-weight-bold) var(--font-size-xl)/var(--font-height-xl) var(--font-family-heading); --text-h3: var(--font-weight-medium) var(--font-size-lg)/var(--font-height-md) var(--font-family-heading); --text-h4: var(--font-weight-medium) var(--font-size-md)/var(--font-height-md) var(--font-family-heading); --text-body: var(--text-sm); --text-body-lg: var(--text-md); --text-caption: var(--text-xs); --text-button: var(--font-weight-medium) var(--font-size-sm)/1 var(--font-family-base); --text-mono: var(--font-weight-regular) var(--font-size-xs)/var(--font-height-sm) var(--font-mono); /* ---------- Radii ---------- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 25px; --radius-full: 9999px; /* ---------- Shadows ---------- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --shadow-header: 0 1px 3px 0 rgba(0, 79, 147, 0.10); --shadow-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #3399FF; /* ---------- Spacing ---------- */ --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; /* ---------- Motion ---------- */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emph: cubic-bezier(0.3, 0, 0, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 240ms; } /* ---------- Surface: Desktop FM (Ubuntu) ---------- */ [data-surface="fm"] { --font-family-heading: 'Ubuntu', ui-sans-serif, system-ui, sans-serif; --font-family-base: 'Ubuntu', ui-sans-serif, system-ui, sans-serif; --font-size-h1: 30px; --font-size-h2: 20px; --font-size-xl: 30px; --font-size-lg: 18px; --font-size-md: 16px; --font-size-sm: 14px; --font-size-xs: 13px; --font-size-macro: 10px; --font-height-xl: 30px; --font-height-lg: 26px; --font-height-md: 24px; --font-height-sm: 18px; --font-height-xs: 16px; --font-height-xxs: 14px; --font-height-macro: 12px; } /* ---------- Surface: Mobile (Ubuntu) ---------- */ [data-surface="mobile"] { --font-family-heading: 'Ubuntu', ui-sans-serif, system-ui, sans-serif; --font-family-base: 'Ubuntu', ui-sans-serif, system-ui, sans-serif; --font-size-h1: 24px; --font-size-h2: 20px; --font-size-xl: 30px; --font-size-lg: 18px; --font-size-md: 16px; --font-size-sm: 14px; --font-size-xs: 12px; --font-size-macro: 10px; --font-height-xl: 30px; --font-height-lg: 26px; --font-height-md: 24px; --font-height-sm: 20px; --font-height-xs: 18px; --font-height-xxs: 14px; --font-height-macro: 12px; } /* ---------- Dark mode ---------- */ [data-theme="dark"] { --color-bg: #111827; --color-bg-shade: #1F2937; --color-bg-shade-secondary: #374151; --color-bg-secondary: #1a2e44; --color-surface: #1F2937; --color-surface-hover: #374151; --color-text-title: #F9FAFB; --color-text: #D1D5DB; --color-text-secondary: #9CA3AF; --color-text-placeholder: #6B7280; --color-border-base: #374151; --color-border-active: #3399FF; --color-primary-hover: #4DA6FF; --color-primary-tint: #1a2e44; --color-header-bg: #1F2937; --color-header-shadow: rgba(0, 0, 0, 0.3); --chat-user-bubble-bg: #2B5A8C; --chat-user-bubble-fg: #F9FAFB; --chat-user-bubble-border: #4DA6FF; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: #111827; --color-bg-shade: #1F2937; --color-bg-shade-secondary: #374151; --color-bg-secondary: #1a2e44; --color-surface: #1F2937; --color-surface-hover: #374151; --color-text-title: #F9FAFB; --color-text: #D1D5DB; --color-text-secondary: #9CA3AF; --color-text-placeholder: #6B7280; --color-border-base: #374151; --color-border-active: #3399FF; --color-primary-hover: #4DA6FF; --color-primary-tint: #1a2e44; --color-header-bg: #1F2937; --color-header-shadow: rgba(0, 0, 0, 0.3); --chat-user-bubble-bg: #2B5A8C; --chat-user-bubble-fg: #F9FAFB; --chat-user-bubble-border: #4DA6FF; } } /* ---------- Base element defaults ---------- */ html, body { font: var(--text-sm); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font: var(--text-h1); color: var(--color-text-title); margin: 0; } h2 { font: var(--text-h2); color: var(--color-text-title); margin: 0; } h3 { font: var(--text-lg); color: var(--color-text-title); margin: 0; } p { font: var(--text-sm); color: var(--color-text); margin: 0; } small, .caption { font: var(--text-xs); color: var(--color-text-secondary); } code, pre { font: var(--text-mono); } /* ---------- Primitives ---------- */ .ds-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font: var(--text-button); border: 0; cursor: pointer; transition: background var(--dur-base) var(--ease-standard); } .ds-btn-primary:hover { background: var(--color-primary-hover); } .ds-btn-primary:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .ds-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 19px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text-title); border: 1px solid var(--color-border-base); font: var(--text-button); cursor: pointer; transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); } .ds-btn-secondary:hover { background: var(--color-surface-hover); border-color: var(--color-text-placeholder); } .ds-card { background: var(--color-surface); border: 1px solid var(--color-border-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .ds-input { width: 100%; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--color-border-base); background: var(--color-surface); color: var(--color-text-title); font: var(--text-sm); transition: border-color var(--dur-base) var(--ease-standard); } .ds-input::placeholder { color: var(--color-text-placeholder); } .ds-input:focus { outline: none; border-color: var(--color-border-active); box-shadow: 0 0 0 3px rgba(51,153,255,0.18); }