/* ============================================================================ * Setu Design System (SDS) v1.0 — Design Tokens (Theme Engine) * ---------------------------------------------------------------------------- * The single source of truth for every visual value, expressed as CSS custom * properties. Components reference SEMANTIC tokens only; themes remap them. * * Layers: * 1. Primitive tokens --sds-palette-* (fixed raw values) * 2. Semantic tokens --sds-color-*, etc. (role aliases; screens use these) * 3. Bootstrap remap --bs-* (so Bootstrap 5.3 inherits SDS) * * Theme is selected via and an optional * for multi-trust brand overrides. * ==========================================================================*/ :root { /* ---- Primitive palette --------------------------------------------- */ /* Primary — Trust Blue */ --sds-palette-primary-50: #EEF3FA; --sds-palette-primary-100: #D6E3F2; --sds-palette-primary-200: #AFC7E6; --sds-palette-primary-300: #7FA4D6; --sds-palette-primary-400: #4E7CC2; --sds-palette-primary-500: #2A5FA6; --sds-palette-primary-600: #1B4F8A; --sds-palette-primary-700: #163F6E; --sds-palette-primary-800: #122F52; --sds-palette-primary-900: #0D2038; /* Secondary — Deep Teal */ --sds-palette-secondary-50: #E9F6F4; --sds-palette-secondary-100: #C7EAE6; --sds-palette-secondary-500: #0E8F8A; --sds-palette-secondary-600: #0A7573; --sds-palette-secondary-700: #0A5E5D; /* Accent — Saffron (spotlight/CTA only) */ --sds-palette-accent-50: #FEF3E6; --sds-palette-accent-100: #FBDFBE; --sds-palette-accent-400: #F28C22; --sds-palette-accent-500: #E0770C; --sds-palette-accent-600: #BE6109; --sds-palette-accent-700: #994D08; /* Semantic hues */ --sds-palette-success-50: #E7F6EC; --sds-palette-success-100: #C3E9CF; --sds-palette-success-500: #2FA35B; --sds-palette-success-600: #1E874B; --sds-palette-success-700: #166B3B; --sds-palette-warning-50: #FFF6E5; --sds-palette-warning-100: #FCE7B8; --sds-palette-warning-500: #E0A100; --sds-palette-warning-600: #B87D00; --sds-palette-warning-700: #8F6100; --sds-palette-danger-50: #FDECEC; --sds-palette-danger-100: #F8C9C9; --sds-palette-danger-500: #E0454F; --sds-palette-danger-600: #C6303B; --sds-palette-danger-700: #9E222C; --sds-palette-info-50: #E7F2FB; --sds-palette-info-100: #C3DEF4; --sds-palette-info-500: #2E86C9; --sds-palette-info-600: #1E6FAE; --sds-palette-info-700: #175788; /* Neutrals (cool gray) */ --sds-palette-neutral-0: #FFFFFF; --sds-palette-neutral-25: #FBFCFD; --sds-palette-neutral-50: #F6F8FA; --sds-palette-neutral-100: #EDF1F5; --sds-palette-neutral-200: #DDE3EB; --sds-palette-neutral-300: #C3CCD6; --sds-palette-neutral-400: #98A4B2; --sds-palette-neutral-500: #6B7885; --sds-palette-neutral-600: #4C5865; --sds-palette-neutral-700: #38424D; --sds-palette-neutral-800: #232B33; --sds-palette-neutral-900: #141A20; --sds-palette-neutral-950: #0B0F13; /* ---- Spacing (4px grid) -------------------------------------------- */ --sds-space-0: 0; --sds-space-0-5: 2px; --sds-space-1: 4px; --sds-space-2: 8px; --sds-space-3: 12px; --sds-space-4: 16px; --sds-space-5: 20px; --sds-space-6: 24px; --sds-space-8: 32px; --sds-space-10: 40px; --sds-space-12: 48px; --sds-space-16: 64px; --sds-space-20: 80px; --sds-space-24: 96px; /* ---- Radius --------------------------------------------------------- */ --sds-radius-none: 0; --sds-radius-xs: 2px; --sds-radius-sm: 4px; --sds-radius-md: 8px; --sds-radius-lg: 12px; --sds-radius-xl: 16px; --sds-radius-2xl: 24px; --sds-radius-full: 9999px; /* ---- Border widths -------------------------------------------------- */ --sds-border-1: 1px; --sds-border-2: 2px; --sds-border-4: 4px; /* ---- Typography ----------------------------------------------------- */ --sds-font-sans: "Inter", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --sds-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --sds-weight-regular: 400; --sds-weight-medium: 500; --sds-weight-semibold: 600; --sds-weight-bold: 700; --sds-fs-display: 3rem; /* 48 */ --sds-fs-h1: 2.25rem; /* 36 */ --sds-fs-h2: 1.75rem; /* 28 */ --sds-fs-h3: 1.5rem; /* 24 */ --sds-fs-h4: 1.25rem; /* 20 */ --sds-fs-h5: 1.125rem; /* 18 */ --sds-fs-h6: 1rem; /* 16 */ --sds-fs-body-lg: 1.125rem; /* 18 */ --sds-fs-body: 1rem; /* 16 */ --sds-fs-body-sm: 0.875rem; /* 14 */ --sds-fs-caption: 0.75rem; /* 12 */ --sds-lh-tight: 1.2; --sds-lh-heading: 1.3; --sds-lh-body: 1.5; --sds-tracking-tight: -0.02em; --sds-tracking-normal: 0; --sds-tracking-wide: 0.06em; /* ---- Elevation / shadows ------------------------------------------- */ --sds-shadow-xs: 0 1px 2px rgba(16, 30, 54, 0.06); --sds-shadow-sm: 0 1px 3px rgba(16, 30, 54, 0.08), 0 1px 2px rgba(16, 30, 54, 0.04); --sds-shadow-md: 0 4px 12px rgba(16, 30, 54, 0.10), 0 2px 4px rgba(16, 30, 54, 0.06); --sds-shadow-lg: 0 12px 28px rgba(16, 30, 54, 0.14), 0 4px 8px rgba(16, 30, 54, 0.06); --sds-shadow-xl: 0 24px 48px rgba(16, 30, 54, 0.18); /* ---- Opacity -------------------------------------------------------- */ --sds-opacity-disabled: 0.4; --sds-opacity-muted: 0.64; --sds-opacity-hover-scrim: 0.04; --sds-opacity-pressed-scrim: 0.08; --sds-opacity-overlay: 0.56; /* ---- Motion --------------------------------------------------------- */ --sds-motion-instant: 0ms; --sds-motion-fast: 120ms; --sds-motion-base: 200ms; --sds-motion-slow: 320ms; --sds-motion-slower: 480ms; --sds-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --sds-ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --sds-ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --sds-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* ---- Z-index -------------------------------------------------------- */ --sds-z-base: 0; --sds-z-raised: 10; --sds-z-sticky: 100; --sds-z-dropdown: 1000; --sds-z-overlay: 1100; --sds-z-modal: 1200; --sds-z-toast: 1300; --sds-z-tooltip: 1400; /* ---- Layout --------------------------------------------------------- */ --sds-container-sm: 640px; --sds-container-md: 768px; --sds-container-lg: 1024px; --sds-container-xl: 1280px; --sds-container-2xl: 1440px; --sds-measure-prose: 72ch; --sds-sidebar-w: 264px; --sds-sidebar-rail-w: 72px; --sds-header-h: 64px; /* ---- Icon ----------------------------------------------------------- */ --sds-icon-xs: 16px; --sds-icon-sm: 20px; --sds-icon-md: 24px; --sds-icon-lg: 32px; --sds-icon-xl: 40px; } /* ============================================================================ * SEMANTIC ROLES — LIGHT THEME (default) * ==========================================================================*/ :root, [data-sds-theme="light"] { --sds-color-bg-app: var(--sds-palette-neutral-50); --sds-color-surface: var(--sds-palette-neutral-0); --sds-color-surface-raised: var(--sds-palette-neutral-0); --sds-color-surface-sunken: var(--sds-palette-neutral-50); --sds-color-surface-tint: var(--sds-palette-primary-50); --sds-color-border-subtle: var(--sds-palette-neutral-100); --sds-color-border: var(--sds-palette-neutral-200); --sds-color-border-strong: var(--sds-palette-neutral-300); --sds-color-text: var(--sds-palette-neutral-700); --sds-color-text-strong: var(--sds-palette-neutral-900); --sds-color-text-muted: var(--sds-palette-neutral-500); --sds-color-text-disabled: var(--sds-palette-neutral-400); --sds-color-text-inverse: var(--sds-palette-neutral-0); --sds-color-link: var(--sds-palette-primary-600); --sds-color-action: var(--sds-palette-primary-600); --sds-color-action-hover: var(--sds-palette-primary-700); --sds-color-action-active: var(--sds-palette-primary-800); --sds-color-accent: var(--sds-palette-accent-500); --sds-color-accent-hover: var(--sds-palette-accent-600); --sds-color-success: var(--sds-palette-success-600); --sds-color-success-bg: var(--sds-palette-success-50); --sds-color-success-text: var(--sds-palette-success-700); --sds-color-warning: var(--sds-palette-warning-600); --sds-color-warning-bg: var(--sds-palette-warning-50); --sds-color-warning-text: var(--sds-palette-warning-700); --sds-color-danger: var(--sds-palette-danger-600); --sds-color-danger-hover: var(--sds-palette-danger-700); --sds-color-danger-bg: var(--sds-palette-danger-50); --sds-color-danger-text: var(--sds-palette-danger-700); --sds-color-info: var(--sds-palette-info-600); --sds-color-info-bg: var(--sds-palette-info-50); --sds-color-info-text: var(--sds-palette-info-700); --sds-color-focus-ring: rgba(27, 79, 138, 0.4); --sds-color-overlay: rgba(20, 26, 32, 0.56); --sds-color-hover-scrim: rgba(20, 26, 32, 0.04); --sds-color-pressed-scrim: rgba(20, 26, 32, 0.08); color-scheme: light; } /* ============================================================================ * SEMANTIC ROLES — DARK THEME (elevation via light, solids shifted up) * ==========================================================================*/ [data-sds-theme="dark"] { --sds-color-bg-app: var(--sds-palette-neutral-950); --sds-color-surface: #141A20; --sds-color-surface-raised: #1C242C; --sds-color-surface-sunken: #0F141A; --sds-color-surface-tint: rgba(79, 124, 194, 0.16); --sds-color-border-subtle: rgba(255, 255, 255, 0.06); --sds-color-border: rgba(255, 255, 255, 0.12); --sds-color-border-strong: rgba(255, 255, 255, 0.24); --sds-color-text: #E6EBF0; --sds-color-text-strong: #F5F7FA; --sds-color-text-muted: var(--sds-palette-neutral-400); --sds-color-text-disabled: var(--sds-palette-neutral-600); --sds-color-text-inverse: var(--sds-palette-neutral-900); --sds-color-link: var(--sds-palette-primary-300); --sds-color-action: var(--sds-palette-primary-400); --sds-color-action-hover: var(--sds-palette-primary-300); --sds-color-action-active: var(--sds-palette-primary-200); --sds-color-accent: var(--sds-palette-accent-400); --sds-color-accent-hover: #F7A24D; --sds-color-success: var(--sds-palette-success-500); --sds-color-success-bg: rgba(47, 163, 91, 0.16); --sds-color-success-text: #7FD4A0; --sds-color-warning: var(--sds-palette-warning-500); --sds-color-warning-bg: rgba(224, 161, 0, 0.16); --sds-color-warning-text: #F2C965; --sds-color-danger: var(--sds-palette-danger-500); --sds-color-danger-hover: #EC6A72; --sds-color-danger-bg: rgba(224, 69, 79, 0.16); --sds-color-danger-text: #F0989D; --sds-color-info: var(--sds-palette-info-500); --sds-color-info-bg: rgba(46, 134, 201, 0.16); --sds-color-info-text: #8FC1E8; --sds-color-focus-ring: rgba(126, 164, 214, 0.6); --sds-color-overlay: rgba(0, 0, 0, 0.64); --sds-color-hover-scrim: rgba(255, 255, 255, 0.06); --sds-color-pressed-scrim: rgba(255, 255, 255, 0.1); /* On dark, convey elevation with lighter surfaces, not shadows. */ --sds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --sds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --sds-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6); color-scheme: dark; } /* ============================================================================ * HIGH-CONTRAST THEME * ==========================================================================*/ [data-sds-theme="hc"] { --sds-color-bg-app: #FFFFFF; --sds-color-surface: #FFFFFF; --sds-color-surface-raised: #FFFFFF; --sds-color-surface-sunken: #FFFFFF; --sds-color-surface-tint: #E3ECF7; --sds-color-border-subtle: #000000; --sds-color-border: #000000; --sds-color-border-strong: #000000; --sds-color-text: #000000; --sds-color-text-strong: #000000; --sds-color-text-muted: #1A1A1A; --sds-color-text-disabled: #595959; --sds-color-text-inverse: #FFFFFF; --sds-color-link: #0A3D91; --sds-color-action: #0A3D91; --sds-color-action-hover: #062B6B; --sds-color-danger: #A80710; --sds-color-focus-ring: #0A3D91; --sds-border-1: 2px; } /* Respect OS dark preference automatically when the app requests "auto". */ @media (prefers-color-scheme: dark) { [data-sds-theme="auto"] { --sds-color-bg-app: var(--sds-palette-neutral-950); --sds-color-surface: #141A20; --sds-color-text: #E6EBF0; --sds-color-text-strong: #F5F7FA; --sds-color-border: rgba(255, 255, 255, 0.12); --sds-color-action: var(--sds-palette-primary-400); color-scheme: dark; } } /* ============================================================================ * BOOTSTRAP 5.3 REMAP — so Bootstrap components inherit SDS theming * ==========================================================================*/ :root { --bs-primary: var(--sds-color-action); --bs-primary-rgb: 27, 79, 138; --bs-secondary: var(--sds-palette-secondary-600); --bs-success: var(--sds-color-success); --bs-warning: var(--sds-color-warning); --bs-danger: var(--sds-color-danger); --bs-info: var(--sds-color-info); --bs-body-bg: var(--sds-color-bg-app); --bs-body-color: var(--sds-color-text); --bs-body-font-family: var(--sds-font-sans); --bs-border-color: var(--sds-color-border); --bs-border-radius: var(--sds-radius-md); --bs-link-color: var(--sds-color-link); --bs-emphasis-color: var(--sds-color-text-strong); }