/* ========================================================================== DigiSail 360 — Design Tokens -------------------------------------------------------------------------- The single source of truth for color, spacing, radii, typography, shadow, and motion across the ERP. Everything else in the design system reads from these CSS custom properties. Naming convention: --ds-- e.g. --ds-purple-600, --ds-space-4 --ds-- e.g. --ds-color-success, --ds-bg-page Light theme is the default. Dark-mode overrides live under [data-theme="dark"] at the bottom of this file so a future toggle can simply set that attribute on . ========================================================================== */ :root { /* ────────────────────────────────────────────────────────────────────── 1. COLOR SCALES (raw palette) Brand palette = SAP Fiori Horizon (the design language used by SAP S/4HANA, Oracle Fusion, Salesforce Lightning, etc). Restrained, enterprise-recognized, accessibility-tested, ages well. We keep `--ds-purple-*` and `--ds-cyan-*` scales below as alternates in case a tenant wants a SaaS-style re-skin later, but all SEMANTIC ALIASES point at the Fiori scales. ────────────────────────────────────────────────────────────────────── */ /* Fiori Blue — primary brand (SAP Horizon "Brand Blue") */ --ds-fiori-50: #E5F0FA; --ds-fiori-100: #D1E8FF; --ds-fiori-200: #A6D5FF; --ds-fiori-300: #6BBBFF; --ds-fiori-400: #2F9BFA; --ds-fiori-500: #0070F2; /* ← canonical primary */ --ds-fiori-600: #0064D9; --ds-fiori-700: #0054B4; --ds-fiori-800: #003F87; --ds-fiori-900: #002A5A; --ds-fiori-950: #001A3A; /* Fiori Teal — accent (used for secondary CTAs, info chips) */ --ds-teal-50: #E0F4F5; --ds-teal-100: #B8E3E6; --ds-teal-200: #7BCBD0; --ds-teal-300: #3CB1B8; --ds-teal-400: #1F9AA3; --ds-teal-500: #0E7490; /* ← canonical accent */ --ds-teal-600: #0B5F77; --ds-teal-700: #094B5E; --ds-teal-800: #073846; --ds-teal-900: #052730; /* Purple / Cyan (kept as alternates for SaaS-style re-skin) */ --ds-purple-50: #F5F3FF; --ds-purple-100: #EDE9FE; --ds-purple-200: #DDD6FE; --ds-purple-300: #C4B5FD; --ds-purple-400: #A78BFA; --ds-purple-500: #8B5CF6; --ds-purple-600: #7C3AED; --ds-purple-700: #6D28D9; --ds-purple-800: #5B21B6; --ds-purple-900: #4C1D95; --ds-purple-950: #2E1065; --ds-cyan-50: #ECFEFF; --ds-cyan-100: #CFFAFE; --ds-cyan-200: #A5F3FC; --ds-cyan-300: #67E8F9; --ds-cyan-400: #22D3EE; --ds-cyan-500: #06B6D4; --ds-cyan-600: #0891B2; --ds-cyan-700: #0E7490; --ds-cyan-800: #155E75; --ds-cyan-900: #164E63; --ds-cyan-950: #083344; /* Neutral grey — Fiori-tuned (cooler, slight blue cast vs pure greyscale) */ --ds-grey-50: #F5F6F7; /* ← Fiori page background */ --ds-grey-100: #EAECEE; --ds-grey-200: #D9DCE1; --ds-grey-300: #BCC3CC; --ds-grey-400: #8C95A1; --ds-grey-500: #6A737F; --ds-grey-600: #4A5562; --ds-grey-700: #353B44; --ds-grey-800: #232830; --ds-grey-900: #1A1E25; --ds-grey-950: #12151A; /* Semantic — Fiori Horizon palette (specific, accessibility-tested) */ --ds-success-50: #E7F4E6; --ds-success-100: #C9E5C5; --ds-success-500: #2B7C2A; --ds-success-600: #256F3A; /* ← canonical success (Fiori) */ --ds-success-700: #1E5C30; --ds-success-900: #133D1F; --ds-warning-50: #FFF5DE; --ds-warning-100: #FFE9B0; --ds-warning-500: #C75300; /* ← canonical warning (Fiori "Critical Orange") */ --ds-warning-600: #B14A00; --ds-warning-700: #8F3C00; --ds-warning-900: #5C2700; --ds-danger-50: #FFE8E8; --ds-danger-100: #FFCCCC; --ds-danger-500: #BB0000; --ds-danger-600: #AA0808; /* ← canonical danger (Fiori "Negative Red") */ --ds-danger-700: #8B0000; --ds-danger-900: #5C0000; --ds-info-50: #E5F0FA; --ds-info-100: #D1E8FF; --ds-info-500: #0070F2; /* ← canonical info (same as primary in Fiori) */ --ds-info-600: #0064D9; --ds-info-700: #0054B4; --ds-info-900: #002A5A; /* ────────────────────────────────────────────────────────────────────── 2. SEMANTIC ALIASES Every component reads from these, not from the raw scale above. Changing the brand later = update this section only. ────────────────────────────────────────────────────────────────────── */ /* Brand */ --ds-color-primary: var(--ds-fiori-500); --ds-color-primary-hover: var(--ds-fiori-700); --ds-color-primary-soft: var(--ds-fiori-100); --ds-color-primary-ink: #FFFFFF; /* text on primary */ --ds-color-accent: var(--ds-teal-500); --ds-color-accent-hover: var(--ds-teal-600); /* Page surfaces */ --ds-bg-page: var(--ds-grey-50); --ds-bg-surface: #FFFFFF; --ds-bg-surface-alt: var(--ds-grey-100); --ds-bg-overlay: rgba(26, 30, 37, 0.55); /* modals/backdrops */ /* Borders */ --ds-border-subtle: var(--ds-grey-200); --ds-border-default: var(--ds-grey-300); --ds-border-strong: var(--ds-grey-400); --ds-border-focus: var(--ds-color-primary); /* Text — Fiori uses dark slate-blue, not pure black */ --ds-text-primary: #1D2D3E; /* headings + body */ --ds-text-secondary: var(--ds-grey-600); /* labels, subtitles */ --ds-text-muted: var(--ds-grey-500); /* helper text, captions */ --ds-text-placeholder: var(--ds-grey-400); --ds-text-on-primary: #FFFFFF; --ds-text-link: var(--ds-color-primary); --ds-text-link-hover: var(--ds-fiori-700); /* State colors */ --ds-color-success: var(--ds-success-600); --ds-color-warning: var(--ds-warning-500); --ds-color-danger: var(--ds-danger-600); --ds-color-info: var(--ds-info-500); /* ────────────────────────────────────────────────────────────────────── 3. SPACING SCALE (8px grid) ────────────────────────────────────────────────────────────────────── */ --ds-space-0: 0; --ds-space-1: 4px; /* 0.5 unit — micro adjustments */ --ds-space-2: 8px; /* 1 unit — base */ --ds-space-3: 12px; /* 1.5 — between input rows */ --ds-space-4: 16px; /* 2 — default gap */ --ds-space-5: 24px; /* 3 — card padding */ --ds-space-6: 32px; /* 4 — section gap */ --ds-space-7: 48px; /* 6 — large section */ --ds-space-8: 64px; /* 8 — hero spacing */ --ds-space-9: 96px; --ds-space-10: 128px; /* ────────────────────────────────────────────────────────────────────── 4. BORDER RADII ────────────────────────────────────────────────────────────────────── */ --ds-radius-none: 0; --ds-radius-sm: 4px; /* tiny chips, tags */ --ds-radius-md: 8px; /* buttons, inputs */ --ds-radius-lg: 12px; /* cards */ --ds-radius-xl: 16px; /* large surfaces, modals */ --ds-radius-full: 9999px; /* pills, avatars */ /* ────────────────────────────────────────────────────────────────────── 5. TYPOGRAPHY ────────────────────────────────────────────────────────────────────── */ --ds-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Arabic', 'Noto Sans CJK SC', 'Noto Sans Devanagari', sans-serif; --ds-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --ds-text-xs: 12px; /* 0.75rem — captions, badges */ --ds-text-sm: 14px; /* 0.875rem — secondary body, table cells */ --ds-text-base: 16px; /* 1rem — body */ --ds-text-lg: 18px; /* 1.125 — subhead */ --ds-text-xl: 20px; /* 1.25 — card title */ --ds-text-2xl: 24px; /* 1.5 — page subtitle */ --ds-text-3xl: 30px; /* 1.875 — page title */ --ds-text-4xl: 36px; /* 2.25 — hero h2 */ --ds-text-5xl: 48px; /* 3rem — hero h1 */ --ds-line-tight: 1.15; --ds-line-snug: 1.35; --ds-line-normal: 1.55; --ds-line-relaxed: 1.75; --ds-weight-normal: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700; --ds-tracking-tight: -0.02em; --ds-tracking-normal: 0; --ds-tracking-wide: 0.05em; /* ────────────────────────────────────────────────────────────────────── 6. SHADOWS (layered for natural depth) ────────────────────────────────────────────────────────────────────── */ --ds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.04); --ds-shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --ds-shadow-xl: 0 24px 32px -8px rgba(0, 0, 0, 0.12), 0 8px 16px -4px rgba(0, 0, 0, 0.06); /* Focus ring — Fiori blue glow, used by every interactive element */ --ds-shadow-focus: 0 0 0 3px rgba(0, 112, 242, 0.25); /* ────────────────────────────────────────────────────────────────────── 7. MOTION ────────────────────────────────────────────────────────────────────── */ --ds-transition-fast: 150ms ease-in-out; --ds-transition-normal: 250ms ease-in-out; --ds-transition-slow: 350ms ease-in-out; /* ────────────────────────────────────────────────────────────────────── 8. Z-INDEX (named layers so we never guess again) ────────────────────────────────────────────────────────────────────── */ --ds-z-base: 0; --ds-z-dropdown: 100; --ds-z-sticky: 200; --ds-z-fixed-nav: 900; --ds-z-modal: 1000; --ds-z-toast: 1100; --ds-z-tooltip: 1200; } /* ============================================================================ DARK MODE OVERRIDES Toggle by setting or . Only the SEMANTIC ALIASES flip — the raw color scales are unchanged so any code referencing --ds-purple-600 still gets the same hue. ============================================================================ */ [data-theme="dark"] { --ds-bg-page: var(--ds-grey-950); --ds-bg-surface: var(--ds-grey-900); --ds-bg-surface-alt: var(--ds-grey-800); --ds-bg-overlay: rgba(0, 0, 0, 0.7); --ds-border-subtle: var(--ds-grey-800); --ds-border-default: var(--ds-grey-700); --ds-border-strong: var(--ds-grey-600); --ds-text-primary: var(--ds-grey-50); --ds-text-secondary: var(--ds-grey-300); --ds-text-muted: var(--ds-grey-400); --ds-text-placeholder: var(--ds-grey-500); /* Dark mode lightens primary slightly + uses translucent blue tint for soft */ --ds-color-primary: var(--ds-fiori-400); --ds-color-primary-soft: rgba(47, 155, 250, 0.18); --ds-text-link: var(--ds-fiori-300); --ds-text-link-hover: var(--ds-fiori-200); --ds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --ds-shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4); --ds-shadow-xl: 0 24px 32px -8px rgba(0, 0, 0, 0.7), 0 8px 16px -4px rgba(0, 0, 0, 0.5); --ds-shadow-focus: 0 0 0 3px rgba(107, 187, 255, 0.35); } /* ============================================================================ CORPORATE THEME — a calm, SAP-like LIGHT theme with an indigo accent. Toggle by setting . ============================================================================ */ [data-theme="corporate"] { --ds-bg-page: #F4F6FB; /* cooler, calmer page surface */ --ds-color-primary: #2F5BD7; /* corporate indigo */ --ds-color-primary-soft: rgba(47, 91, 215, 0.12); --ds-color-primary-ink: #FFFFFF; --ds-text-link: #2F5BD7; --ds-text-link-hover: #1E3FA8; --ds-shadow-focus: 0 0 0 3px rgba(47, 91, 215, 0.28); } /* ============================================================================ RESET-LITE — only what's strictly needed for the design system to behave. We intentionally don't ship a full reset; the surrounding app uses Bootstrap. ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--ds-font-sans); color: var(--ds-text-primary); background: var(--ds-bg-page); line-height: var(--ds-line-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }