/* * SIJAKA Design Tokens v1.1.1 * Status: Draft for final sidebar consistency audit. * Visual direction: normalized from User Management. * This file is the authoritative source for shared visual decisions. */ :root { color-scheme: light; /* Typography */ --font-family-sans: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-size-display: 2rem; --font-size-h1: 1.75rem; --font-size-h2: 1.5rem; --font-size-h3: 1.25rem; --font-size-h4: 1.125rem; --font-size-body-lg: 1rem; --font-size-body: 0.875rem; --font-size-body-sm: 0.8125rem; --font-size-label: 0.8125rem; --font-size-caption: 0.75rem; --font-size-overline: 0.6875rem; --line-height-tight: 1.25; --line-height-heading: 1.35; --line-height-body: 1.55; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* SIJAKA palette, derived from the supplied logo. */ --color-primary-950: #02132e; --color-primary-900: #0b2551; --color-primary-800: #01306d; --color-primary-700: #034a93; --color-primary-600: #0152ae; --color-primary-500: #0874d1; --color-primary-400: #2f8be2; --color-primary-300: #67adeb; --color-primary-200: #b4d8f5; --color-primary-100: #e1f1fc; --color-primary-50: #f2f8fd; --color-brand-teal: #009fa8; --color-brand-orange: #ff8a00; /* Neutral palette */ --color-neutral-950: #111820; --color-neutral-900: #1b2630; --color-neutral-800: #293640; --color-neutral-700: #46545f; --color-neutral-600: #65727c; --color-neutral-500: #7f8b94; --color-neutral-400: #a4adb4; --color-neutral-300: #cdd3d8; --color-neutral-200: #e2e6e9; --color-neutral-100: #eef1f3; --color-neutral-50: #f7f9fa; --color-white: #ffffff; /* Semantic palette */ --color-success-700: #1e6847; --color-success-600: #27845b; --color-success-100: #eaf6f0; --color-warning-700: #8d5b18; --color-warning-600: #b7791f; --color-warning-100: #fff6df; --color-danger-700: #96342f; --color-danger-600: #c2413b; --color-danger-100: #fdedec; --color-info-700: #285d83; --color-info-600: #3578a8; --color-info-100: #eaf3fa; /* Semantic aliases */ --color-bg-app: var(--color-primary-50); --color-bg-surface: var(--color-white); --color-bg-muted: var(--color-neutral-100); --color-text-primary: var(--color-neutral-900); --color-text-secondary: var(--color-neutral-700); --color-text-muted: var(--color-neutral-600); --color-text-inverse: var(--color-white); --color-border-default: #d9e0e6; --color-border-strong: #bdc8d1; --color-action-primary: var(--color-primary-600); --color-action-primary-hover: var(--color-primary-700); --color-action-primary-active: var(--color-primary-800); --color-focus-ring: rgba(1, 82, 174, 0.24); /* Spacing */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Shape */ --radius-xs: 0.25rem; --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.125rem; --radius-pill: 999px; /* Borders and elevation */ --border-default: 1px solid var(--color-border-default); --border-strong: 1px solid var(--color-border-strong); --shadow-1: 0 1px 2px rgba(22, 32, 41, 0.06); --shadow-2: 0 10px 24px rgba(22, 32, 41, 0.10); --shadow-3: 0 20px 50px rgba(22, 32, 41, 0.18); /* Motion */ --duration-fast: 120ms; --duration-standard: 160ms; --duration-moderate: 240ms; --easing-standard: cubic-bezier(0.2, 0, 0, 1); /* Application shell v1.1.1 — canonical, collision-safe tokens */ --ds-sidebar-width: 292px; --ds-sidebar-collapsed-width: 84px; --ds-sidebar-background: var(--color-primary-800); --ds-sidebar-text: rgba(255, 255, 255, 0.82); --ds-sidebar-text-muted: rgba(255, 255, 255, 0.58); --ds-sidebar-section-text: rgba(255, 255, 255, 0.52); --ds-sidebar-submenu-text: rgba(255, 255, 255, 0.65); --ds-sidebar-border: rgba(255, 255, 255, 0.10); --ds-sidebar-panel-border: rgba(255, 255, 255, 0.12); --ds-sidebar-hover: rgba(255, 255, 255, 0.09); --ds-sidebar-active: rgba(255, 255, 255, 0.12); --ds-sidebar-submenu-active: rgba(255, 255, 255, 0.10); --ds-sidebar-panel: rgba(255, 255, 255, 0.07); --ds-sidebar-brand-height: 72px; --ds-sidebar-brand-gap: 12px; --ds-sidebar-logo-size: 42px; --ds-sidebar-logo-image-size: 34px; --ds-sidebar-logo-radius: 12px; --ds-sidebar-logo-shadow: 0 4px 16px rgba(0, 0, 0, 0.14); --ds-sidebar-brand-font-size: 17px; --ds-sidebar-brand-subtitle-size: 11px; --ds-sidebar-brand-letter-spacing: 0.03em; --ds-sidebar-section-font-size: 10px; --ds-sidebar-section-letter-spacing: 0.12em; --ds-sidebar-menu-font-size: 14px; --ds-sidebar-submenu-font-size: 12.5px; --ds-sidebar-menu-height: 44px; --ds-sidebar-submenu-height: 32px; --ds-sidebar-menu-gap: 12px; --ds-sidebar-icon-size: 18px; --ds-sidebar-menu-radius: 8px; --ds-sidebar-submenu-radius: 8px; --ds-sidebar-panel-radius: 12px; --ds-topbar-height: 72px; /* Legacy aliases. Shared shell CSS reasserts these after module styles. */ --sidebar-width: var(--ds-sidebar-width); --sidebar-collapsed-width: var(--ds-sidebar-collapsed-width); --sidebar-background: var(--ds-sidebar-background); --sidebar-text: var(--ds-sidebar-text); --sidebar-text-muted: var(--ds-sidebar-text-muted); --sidebar-border: var(--ds-sidebar-border); --sidebar-hover: var(--ds-sidebar-hover); --sidebar-active: var(--ds-sidebar-active); --sidebar-panel: var(--ds-sidebar-panel); --sidebar-brand-height: var(--ds-sidebar-brand-height); --sidebar-logo-size: var(--ds-sidebar-logo-size); --sidebar-brand-font-size: var(--ds-sidebar-brand-font-size); --sidebar-menu-font-size: var(--ds-sidebar-menu-font-size); --sidebar-submenu-font-size: var(--ds-sidebar-submenu-font-size); --sidebar-menu-height: var(--ds-sidebar-menu-height); --topbar-height: var(--ds-topbar-height); --content-max-width: 1680px; /* Layering */ --z-sticky: 100; --z-sidebar: 1000; --z-dropdown: 1200; --z-overlay: 1400; --z-drawer: 1500; --z-modal: 1600; --z-toast: 1700; --z-tooltip: 1800; }