/* ========================================================================== Heliosync SchoolOS — Design Tokens ========================================================================== WHAT THIS FILE IS ----------------- The single shared palette for the whole product. It is the BRIDGE between two UI worlds that otherwise cannot be mixed: 1. The LEGACY UI — Bootstrap 5 + public/assets/css/style.min.css (275 Blade views, layouts/master.blade.php) 2. The NEW UI — Tailwind, built by Vite into public/build/ (layouts/schoolos.blade.php) Bootstrap and Tailwind collide head-on (.p-3 is 1rem in one and 0.75rem in the other; .btn / .card / .table / .d-flex all mean different things), so the two CSS bundles are NEVER loaded on the same page. This file is the one thing both pages DO load, which is how they end up the same colour. HARD RULES — do not break these ------------------------------- * CUSTOM PROPERTIES ONLY. No resets, no `*` selectors, no element rules, no component classes, no utility classes. The only selector permitted in this file is `:root`. Anything else would leak into the legacy Bootstrap pages and change 275 views at once. * Plain, hand-written CSS. This file is NOT processed by Vite — legacy pages load it directly via asset('assets/css/heliosync-tokens.css'), so it must be valid standalone CSS with no build step and no imports. * The colour values here are mirrored in tailwind.config.js. If you change a value in one, change it in the other. They must stay identical. USAGE ----- Legacy Bootstrap views: color: var(--hs-gold-700); New Tailwind views: class="text-gold-700" (same value) ========================================================================== */ :root { /* ---------------------------------------------------------------------- BRAND — Heliosync gold gold-400 is the base brand colour. · On LIGHT backgrounds, use gold-700 for TEXT (contrast-safe). · gold-400 is for SOLID button backgrounds paired with near-black text. · gold-400 is also the active-nav colour on the DARK sidebar. ---------------------------------------------------------------------- */ --hs-gold-50: #FBF8EC; --hs-gold-100: #F6EFD0; --hs-gold-200: #EDDFA2; --hs-gold-300: #E0CA6B; --hs-gold-400: #D4AF37; --hs-gold-500: #BE9A24; --hs-gold-600: #9C7C1B; --hs-gold-700: #7A6015; --hs-gold-800: #5A4610; --hs-gold-900: #3D2F0A; /* Convenience alias for the base brand colour. */ --hs-brand: #D4AF37; /* ---------------------------------------------------------------------- INK — warm neutral ramp, tuned to sit beside the gold ---------------------------------------------------------------------- */ --hs-ink-0: #FFFFFF; --hs-ink-25: #FCFCFD; --hs-ink-50: #F8F9FA; --hs-ink-100: #F1F3F5; --hs-ink-200: #E5E8EB; --hs-ink-300: #D1D6DB; --hs-ink-400: #9BA3AD; --hs-ink-500: #6B7480; --hs-ink-600: #4E5661; --hs-ink-700: #363D47; --hs-ink-800: #23282F; --hs-ink-900: #14171C; --hs-ink-950: #0D0F13; /* ---------------------------------------------------------------------- SEMANTIC — each state is a triple: text / background / border ---------------------------------------------------------------------- */ --hs-success: #15803D; --hs-success-bg: #F0FDF4; --hs-success-border: #BBF7D0; --hs-warning: #B45309; --hs-warning-bg: #FFFBEB; --hs-warning-border: #FDE68A; --hs-danger: #B91C1C; --hs-danger-bg: #FEF2F2; --hs-danger-border: #FECACA; --hs-info: #0E7490; --hs-info-bg: #ECFEFF; --hs-info-border: #A5F3FC; /* ---------------------------------------------------------------------- ROLES — semantic aliases. Prefer these over raw ramp steps so a future theme change happens in one place. ---------------------------------------------------------------------- */ --hs-bg-page: #F8F9FA; /* ink-50 */ --hs-bg-surface: #FFFFFF; /* ink-0 */ --hs-bg-surface-subtle: #FCFCFD;/* ink-25 */ --hs-bg-muted: #F1F3F5; /* ink-100 */ --hs-bg-sidebar: #0D0F13; /* ink-950 */ --hs-bg-login: #0D0F13; /* ink-950 */ --hs-border: #E5E8EB; /* ink-200 — default 1px border */ --hs-border-strong: #D1D6DB; /* ink-300 */ --hs-text-heading: #14171C; /* ink-900 */ --hs-text-body: #363D47; /* ink-700 */ --hs-text-secondary: #6B7480; /* ink-500 */ --hs-text-disabled: #9BA3AD; /* ink-400 */ --hs-text-on-brand: #14171C; /* near-black on gold-400 */ --hs-text-on-dark: #F1F3F5; /* ink-100 on ink-950 */ --hs-text-brand: #7A6015; /* gold-700 — brand text on light bg */ --hs-focus-ring: #D4AF37; /* gold-400 */ /* ---------------------------------------------------------------------- TYPOGRAPHY — Inter, self-hosted (@fontsource-variable/inter). No CDN: shared hosting and offline school networks must still render. Hierarchy comes from WEIGHT and COLOUR, not size. ---------------------------------------------------------------------- */ --hs-font-sans: 'Inter Variable', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --hs-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* size / line-height / weight */ --hs-text-display-size: 30px; --hs-text-display-line: 36px; --hs-text-display-weight: 600; --hs-text-h1-size: 24px; --hs-text-h1-line: 32px; --hs-text-h1-weight: 600; --hs-text-h2-size: 20px; --hs-text-h2-line: 28px; --hs-text-h2-weight: 600; --hs-text-h3-size: 16px; --hs-text-h3-line: 24px; --hs-text-h3-weight: 600; /* body is the DEFAULT for this dense admin UI */ --hs-text-body-size: 14px; --hs-text-body-line: 20px; --hs-text-body-weight: 400; --hs-text-body-sm-size: 13px; --hs-text-body-sm-line: 18px; --hs-text-body-sm-weight: 400; --hs-text-caption-size: 12px; --hs-text-caption-line: 16px; --hs-text-caption-weight: 500; --hs-text-mono-size: 13px; --hs-text-mono-line: 20px; /* ---------------------------------------------------------------------- SPACING — 4px base ---------------------------------------------------------------------- */ --hs-space-0: 0px; --hs-space-1: 4px; --hs-space-2: 8px; --hs-space-3: 12px; --hs-space-4: 16px; --hs-space-5: 20px; --hs-space-6: 24px; --hs-space-7: 28px; --hs-space-8: 32px; --hs-space-9: 36px; --hs-space-10: 40px; --hs-space-11: 44px; --hs-space-12: 48px; --hs-space-14: 56px; --hs-space-16: 64px; /* ---------------------------------------------------------------------- RADIUS ---------------------------------------------------------------------- */ --hs-radius-sm: 4px; --hs-radius-md: 6px; /* default — buttons, inputs */ --hs-radius-lg: 8px; /* cards */ --hs-radius-xl: 12px; /* modals */ --hs-radius-full: 9999px; /* ---------------------------------------------------------------------- ELEVATION — prefer a 1px --hs-border over a shadow wherever possible. ---------------------------------------------------------------------- */ --hs-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --hs-shadow-sm: 0 1px 3px rgba(16, 24, 40, .08); --hs-shadow-md: 0 4px 12px rgba(16, 24, 40, .08); --hs-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12); /* ---------------------------------------------------------------------- MOTION — every consumer must also honour prefers-reduced-motion. ---------------------------------------------------------------------- */ --hs-duration-hover: 100ms; /* hover / focus */ --hs-duration-popover: 150ms; /* dropdown / tooltip/toast */ --hs-duration-overlay: 200ms; /* modal / drawer */ --hs-duration-page: 300ms; /* page / skeleton */ --hs-ease-out: cubic-bezier(0, 0, .2, 1); --hs-ease-inout: cubic-bezier(.4, 0, .2, 1); /* ---------------------------------------------------------------------- LAYERING — keep overlays above the legacy Bootstrap z-indexes (Bootstrap modal = 1055, tooltip = 1080). ---------------------------------------------------------------------- */ --hs-z-dropdown: 1000; --hs-z-sticky: 1010; --hs-z-drawer: 1030; --hs-z-modal: 1040; --hs-z-toast: 1060; --hs-z-tooltip: 1070; /* ---------------------------------------------------------------------- SHELL METRICS — shared so the legacy and new shells line up visually. ---------------------------------------------------------------------- */ --hs-topbar-height: 56px; --hs-sidebar-width: 260px; --hs-sidebar-width-collapsed: 64px; }