/* =========================================================== Design Tokens — IntegerByte Brand --------------------------------------------------------- Single source of truth for color, radius and shadow values. Every other stylesheet should reference these custom properties (var(--ib-...)) instead of hardcoding hex codes, so the whole app can be re-themed from one place. This file must be loaded before any other stylesheet. =========================================================== */ :root { /* --- Brand primary: orange/red (IntegerByte wordmark) --- */ --ib-primary-50: #FFF4ED; --ib-primary-100: #FFE4D3; --ib-primary-200: #FFC5A1; --ib-primary-300: #FF9D66; --ib-primary-400: #FB6E3A; --ib-primary-500: #F04E23; /* base brand color */ --ib-primary-600: #D63A16; /* hover / active */ --ib-primary-700: #B22C10; /* text-on-light, AA contrast */ --ib-primary-800: #8F250F; --ib-primary-900: #6E1C0C; --ib-primary-rgb: 240, 78, 35; /* --- Dark neutrals: navy-black (IntegerByte wordmark) --- */ --ib-dark-950: #0B0F14; --ib-dark-900: #12181F; /* sidebar / footer / headings */ --ib-dark-800: #1E2733; --ib-dark-700: #2C3844; --ib-dark-600: #4A5664; --ib-dark-400: #7C8A99; /* muted text */ --ib-dark-200: #D7DEE5; /* borders */ --ib-dark-100: #EDF1F4; /* subtle surfaces */ --ib-dark-50: #F7F9FB; /* page background */ /* --- Semantic status colors (kept distinct from brand orange) --- */ --ib-success: #15803D; --ib-success-tint: #E7F6EC; --ib-warning: #B45309; --ib-warning-tint: #FEF3E2; --ib-danger: #DC2626; --ib-danger-tint: #FDECEC; --ib-info: #2563EB; --ib-info-tint: #EAF1FF; /* --- Surfaces & text --- */ --ib-bg: var(--ib-dark-50); --ib-surface: #FFFFFF; --ib-surface-subtle: var(--ib-dark-100); /* "sunken" panels inside a card, e.g. quick-action tiles */ --ib-text: var(--ib-dark-900); --ib-text-muted: var(--ib-dark-600); --ib-border: var(--ib-dark-200); /* --- Shape & elevation --- */ --ib-radius-sm: 10px; --ib-radius-md: 16px; --ib-radius-lg: 24px; --ib-radius-pill: 999px; --ib-shadow-sm: 0 4px 12px rgba(11, 15, 20, 0.06); --ib-shadow-md: 0 12px 30px rgba(11, 15, 20, 0.08); --ib-shadow-lg: 0 24px 55px rgba(11, 15, 20, 0.10); --ib-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* =========================================================== Dark theme — applied by setting data-theme="dark" on (see layouts/dashboard.blade.php, driven by the user's saved Settings > Theme preference). Only the semantic surface/text tokens are redefined here — the --ib-dark-* neutral scale itself is left alone, since a few elements (the footer, the auth pages' brand panel) are intentionally dark regardless of site theme and reference those shades directly. =========================================================== */ :root[data-theme="dark"] { --ib-bg: #0B0F14; --ib-surface: #161D26; --ib-surface-subtle: #1E2733; --ib-text: #F3F5F7; --ib-text-muted: #9BA7B4; --ib-border: #2C3844; }