/* ============================================================================ SAN Design Tokens ---------------------------------------------------------------------------- Single source of truth for color, type, space, radius, elevation, motion. Loaded AFTER every Metronic/plugin stylesheet and BEFORE premium.css. Rules: - Never hardcode a color/radius/shadow in a view or page stylesheet. Reference a semantic token (--san-text-primary, --san-surface-1, ...). - Primitives (--san-neutral-*, --san-brand-*, ...) are the palette. Do not use them directly in components; use the semantic aliases below. - Dark theme: semantic aliases are re-pointed under [data-san-theme="dark"] on . Not wired to a toggle yet. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. COLOR PRIMITIVES --------------------------------------------------------------------- */ /* Neutral - cool slate. Canvas/surface/border/text all derive from here. */ --san-neutral-0: #ffffff; --san-neutral-25: #fbfcfd; --san-neutral-50: #f6f8fa; --san-neutral-100: #eef1f5; --san-neutral-200: #e3e8ef; --san-neutral-300: #cdd5df; --san-neutral-400: #9aa4b2; --san-neutral-500: #697586; --san-neutral-600: #4b5565; --san-neutral-700: #364152; --san-neutral-800: #202939; --san-neutral-900: #121926; /* Brand - teal. Hue inherited from legacy #4db3a4, deepened for contrast. */ --san-brand-50: #e8f7f4; --san-brand-100: #c7ece5; --san-brand-200: #96dccf; --san-brand-300: #61c6b5; --san-brand-400: #35ac99; --san-brand-500: #12907f; --san-brand-600: #0d7667; --san-brand-700: #0a5d51; --san-brand-800: #07443b; /* Accent - indigo. Secondary emphasis, charts, links on dark surfaces. */ --san-accent-50: #eef0fd; --san-accent-100: #dbdefa; --san-accent-300: #a5abf0; --san-accent-500: #4f56d3; --san-accent-600: #3f45b4; --san-accent-700: #313691; /* Status */ --san-success-50: #e7f6ef; --san-success-100: #c6ebda; --san-success-500: #12805c; --san-success-600: #0d6a4c; --san-success-700: #09543c; --san-warning-50: #fdf4e3; --san-warning-100: #fae6bd; --san-warning-500: #b26a00; --san-warning-600: #965800; --san-warning-700: #7a4700; --san-danger-50: #fdeceb; --san-danger-100: #fad2cf; --san-danger-500: #c5372c; --san-danger-600: #a62c23; --san-danger-700: #86231b; --san-info-50: #eaf3fc; --san-info-100: #cfe3f8; --san-info-500: #1c6fbf; --san-info-600: #175c9f; --san-info-700: #124a80; /* Alpha primitives - rings, overlays, hover washes. */ --san-alpha-brand-8: rgba(18, 144, 127, 0.08); --san-alpha-brand-16: rgba(18, 144, 127, 0.16); --san-alpha-brand-24: rgba(18, 144, 127, 0.24); --san-alpha-ink-4: rgba(18, 25, 38, 0.04); --san-alpha-ink-8: rgba(18, 25, 38, 0.08); --san-alpha-ink-16: rgba(18, 25, 38, 0.16); --san-alpha-ink-56: rgba(18, 25, 38, 0.56); --san-alpha-danger-16: rgba(197, 55, 44, 0.16); /* --------------------------------------------------------------------- 2. SEMANTIC COLOR ALIASES (use these in components) --------------------------------------------------------------------- */ /* Surfaces - canvas is the page, surface-1 the card, surface-2/3 nested. */ --san-canvas: var(--san-neutral-50); --san-surface-1: var(--san-neutral-0); --san-surface-2: var(--san-neutral-25); --san-surface-3: var(--san-neutral-100); --san-surface-sunken: var(--san-neutral-100); --san-surface-inverse: var(--san-neutral-900); --san-surface-hover: var(--san-alpha-ink-4); --san-surface-selected: var(--san-brand-50); /* Text */ --san-text-primary: var(--san-neutral-800); --san-text-secondary: var(--san-neutral-600); --san-text-muted: var(--san-neutral-500); --san-text-disabled: var(--san-neutral-400); --san-text-inverse: var(--san-neutral-0); --san-text-brand: var(--san-brand-600); --san-text-link: var(--san-brand-600); --san-text-link-hover: var(--san-brand-700); /* Borders */ --san-border-subtle: var(--san-neutral-100); --san-border: var(--san-neutral-200); --san-border-strong: var(--san-neutral-300); --san-border-brand: var(--san-brand-400); --san-border-danger: var(--san-danger-500); /* Brand intent */ --san-brand: var(--san-brand-500); --san-brand-hover: var(--san-brand-600); --san-brand-active: var(--san-brand-700); --san-brand-subtle: var(--san-brand-50); --san-brand-on: var(--san-neutral-0); /* Status intent */ --san-success: var(--san-success-500); --san-success-subtle: var(--san-success-50); --san-warning: var(--san-warning-500); --san-warning-subtle: var(--san-warning-50); --san-danger: var(--san-danger-500); --san-danger-subtle: var(--san-danger-50); --san-info: var(--san-info-500); --san-info-subtle: var(--san-info-50); /* Overlay / scrim */ --san-scrim: rgba(18, 25, 38, 0.48); /* Auth screens (login/lock) are deliberately dark: the shipped brand mark Content/Custom/img/logo-white-bg.png is a white logo and only reads on a dark ground. These stay dark in both themes. */ --san-auth-canvas-from: #223046; --san-auth-canvas-to: var(--san-neutral-900); --san-auth-glow: rgba(53, 172, 153, 0.20); --san-auth-glow-accent: rgba(79, 86, 211, 0.16); --san-auth-text: var(--san-neutral-300); --san-auth-text-muted: var(--san-neutral-400); /* --------------------------------------------------------------------- 3. TYPOGRAPHY --------------------------------------------------------------------- */ --san-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --san-font-mono: "JetBrains Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* Scale - dense admin. 13px body is the legacy baseline, kept. */ --san-text-2xs: 10px; --san-text-xs: 11px; --san-text-sm: 12px; --san-text-md: 13px; --san-text-lg: 14px; --san-text-xl: 16px; --san-text-2xl: 19px; --san-text-3xl: 23px; --san-text-4xl: 28px; --san-weight-regular: 400; --san-weight-medium: 500; --san-weight-semibold: 600; --san-weight-bold: 700; --san-leading-tight: 1.25; --san-leading-snug: 1.4; --san-leading-normal: 1.55; --san-leading-relaxed: 1.7; --san-tracking-tight: -0.011em; /* headings */ --san-tracking-normal: 0; --san-tracking-wide: 0.04em; /* micro caps: table heads, eyebrows */ --san-tracking-wider: 0.08em; /* Numerals: tabular + slashed zero for tables, prices, ids. */ --san-numeric-tabular: "tnum" 1, "zero" 1; /* --------------------------------------------------------------------- 4. SPACING (4px base grid) --------------------------------------------------------------------- */ --san-space-0: 0; --san-space-1: 2px; --san-space-2: 4px; --san-space-3: 6px; --san-space-4: 8px; --san-space-5: 12px; --san-space-6: 16px; --san-space-7: 20px; --san-space-8: 24px; --san-space-9: 32px; --san-space-10: 40px; --san-space-11: 48px; --san-space-12: 64px; /* --------------------------------------------------------------------- 5. RADIUS --------------------------------------------------------------------- */ --san-radius-xs: 4px; --san-radius-sm: 6px; --san-radius-md: 8px; /* inputs, buttons */ --san-radius-lg: 12px; /* cards, modals, dropdowns */ --san-radius-xl: 16px; --san-radius-pill: 999px; /* --------------------------------------------------------------------- 6. ELEVATION Layered low-opacity shadows. Depth comes from shadow, not from borders. --------------------------------------------------------------------- */ --san-shadow-xs: 0 1px 2px rgba(18, 25, 38, 0.05); --san-shadow-sm: 0 1px 2px rgba(18, 25, 38, 0.05), 0 1px 3px rgba(18, 25, 38, 0.06); --san-shadow-md: 0 2px 4px rgba(18, 25, 38, 0.04), 0 4px 12px rgba(18, 25, 38, 0.07); --san-shadow-lg: 0 4px 8px rgba(18, 25, 38, 0.04), 0 12px 28px rgba(18, 25, 38, 0.10); --san-shadow-xl: 0 8px 16px rgba(18, 25, 38, 0.06), 0 24px 56px rgba(18, 25, 38, 0.16); --san-shadow-inset: inset 0 1px 2px rgba(18, 25, 38, 0.06); /* Focus rings */ --san-ring-brand: 0 0 0 3px var(--san-alpha-brand-24); --san-ring-danger: 0 0 0 3px var(--san-alpha-danger-16); --san-ring-width: 3px; /* --------------------------------------------------------------------- 7. MOTION --------------------------------------------------------------------- */ --san-duration-instant: 80ms; --san-duration-fast: 140ms; --san-duration-normal: 220ms; --san-duration-slow: 360ms; --san-ease-standard: cubic-bezier(0.2, 0, 0.2, 1); --san-ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --san-ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --san-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* --------------------------------------------------------------------- 8. SIZING (control heights keep the dense admin rhythm) --------------------------------------------------------------------- */ --san-control-height-sm: 28px; --san-control-height-md: 34px; --san-control-height-lg: 40px; --san-header-height: 66px; --san-header-menu-height: 44px; --san-container-gutter: 20px; /* Filter selects in a portlet toolbar. .tools shrink-wraps its children, so these need an explicit width - it also fixes the width of the select2 panel that drops out of them. */ --san-toolbar-select-width: 320px; /* --------------------------------------------------------------------- 9. Z-INDEX (aligned with Metronic/Bootstrap 3 stacking) --------------------------------------------------------------------- */ --san-z-base: 1; --san-z-sticky: 100; --san-z-header: 9995; --san-z-dropdown: 10000; --san-z-modal: 10050; --san-z-popover: 10060; --san-z-tooltip: 10070; --san-z-toast: 10080; } /* ============================================================================ DARK THEME Only semantic aliases are re-pointed. Activate with . Not wired to a toggle yet: legacy Metronic stylesheets still hardcode light colors on screens premium.css does not cover, so dark is incomplete until those are migrated to tokens. ========================================================================== */ [data-san-theme="dark"] { --san-canvas: var(--san-neutral-900); --san-surface-1: #18202e; --san-surface-2: #1e2738; --san-surface-3: #263043; --san-surface-sunken: #121926; --san-surface-inverse: var(--san-neutral-0); --san-surface-hover: rgba(255, 255, 255, 0.06); --san-surface-selected: rgba(53, 172, 153, 0.16); --san-text-primary: #e7ebf1; --san-text-secondary: #b3bcc9; --san-text-muted: #8b95a5; --san-text-disabled: #616c7d; --san-text-inverse: var(--san-neutral-900); --san-text-brand: var(--san-brand-300); --san-text-link: var(--san-brand-300); --san-text-link-hover: var(--san-brand-200); --san-border-subtle: rgba(255, 255, 255, 0.06); --san-border: rgba(255, 255, 255, 0.11); --san-border-strong: rgba(255, 255, 255, 0.18); --san-brand: var(--san-brand-400); --san-brand-hover: var(--san-brand-300); --san-brand-active: var(--san-brand-200); --san-brand-subtle: rgba(53, 172, 153, 0.14); --san-brand-on: #06231e; --san-success-subtle: rgba(18, 128, 92, 0.18); --san-warning-subtle: rgba(178, 106, 0, 0.18); --san-danger-subtle: rgba(197, 55, 44, 0.18); --san-info-subtle: rgba(28, 111, 191, 0.18); --san-alpha-ink-4: rgba(255, 255, 255, 0.04); --san-alpha-ink-8: rgba(255, 255, 255, 0.08); --san-alpha-ink-16: rgba(255, 255, 255, 0.16); --san-scrim: rgba(0, 0, 0, 0.62); --san-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --san-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40); --san-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --san-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.50); --san-shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.58); } /* Respect OS-level reduced motion. */ @media (prefers-reduced-motion: reduce) { :root { --san-duration-instant: 0ms; --san-duration-fast: 0ms; --san-duration-normal: 0ms; --san-duration-slow: 0ms; } }