/* ========================================================================== Sentric Design System — Tokens /static/css/tokens.css CSS Custom Properties — fonte unica de verdade para cores, tipografia, espacamentos, bordas, sombras e transicoes. Valores espelhados de static/top/src/scss/_variables.scss. ========================================================================== */ :root { /* ---- Primary Palette (Roxo Sentric) ---- */ --s-primary-900: #1c0950; --s-primary-700: #3d2a8a; --s-primary-500: #574fec; --s-primary-300: #8b7ff5; --s-primary-100: #e8e6fd; --s-primary: var(--s-primary-500); --s-primary-hover: #4840d4; --s-primary-light: var(--s-primary-100); --s-primary-dark: #4039c9; /* ---- Secondary (Verde Teal / IA) ---- */ --s-secondary-700: #0E7C66; --s-secondary-500: #14B8A6; --s-secondary-300: #5EEAD4; --s-secondary-100: #E6FFFA; /* ---- Gray Scale ---- */ --s-gray-900: #0F172A; --s-gray-800: #1E293B; --s-gray-700: #334155; --s-gray-600: #475569; --s-gray-500: #64748B; --s-gray-400: #94A3B8; --s-gray-300: #CBD5E1; --s-gray-200: #E2E8F0; --s-gray-100: #F1F5F9; --s-gray-50: #F8FAFC; /* ---- Semantic Colors ---- */ --s-success: #6dbb30; --s-success-light: rgba(109, 187, 48, 0.12); --s-success-dark: #5a9e28; --s-warning: #fad776; --s-warning-light: rgba(250, 215, 118, 0.15); --s-warning-dark: #92720a; --s-danger: #f64e60; --s-danger-light: rgba(246, 78, 96, 0.10); --s-danger-dark: #e03e4f; --s-info: #73e7f7; --s-info-light: rgba(115, 231, 247, 0.12); --s-info-dark: #0c7b8a; /* ---- Backgrounds ---- */ --s-bg-light: var(--s-gray-50); --s-bg-card: #ffffff; --s-body: var(--s-primary-900); /* ---- Borders ---- */ --s-border: #e8eaed; /* ---- Focus Ring ---- */ --s-focus-ring: rgba(87, 79, 236, 0.1); /* ---- Text ---- */ --s-text-primary: #1c0950; --s-text-secondary: #64748B; --s-text-muted: #94A3B8; --s-text-inverse: #ffffff; /* ---- Typography ---- */ --s-font-family: "Inter", "Rubik", "Open Sans", "Roboto", sans-serif; --s-font: var(--s-font-family); --s-font-size-xs: 0.75rem; /* 12px */ --s-font-size-sm: 0.85rem; /* 13.6px */ --s-font-size-base: 1rem; /* 16px */ --s-font-size-lg: 1.125rem; /* 18px */ --s-font-size-xl: 1.25rem; /* 20px */ /* ---- Spacing ---- */ --s-space-xs: 0.25rem; /* 4px */ --s-space-sm: 0.5rem; /* 8px */ --s-space-md: 1rem; /* 16px */ --s-space-lg: 1.5rem; /* 24px */ --s-space-xl: 2rem; /* 32px */ --s-space-2xl: 3rem; /* 48px */ /* ---- Border Radius ---- */ --s-radius-sm: 0.25rem; --s-radius-md: 0.35rem; --s-radius: var(--s-radius-md); --s-radius-lg: 0.45rem; --s-radius-xl: 0.6rem; --s-radius-full: 50rem; /* ---- Shadows ---- */ --s-shadow-xs: 0 0 25px rgba(140, 152, 164, 0.100); --s-shadow-sm: 0 0 35px rgba(140, 152, 164, 0.125); --s-shadow-md: 0 0 35px rgba(140, 152, 164, 0.150); --s-shadow: var(--s-shadow-md); --s-shadow-lg: 0 10px 40px 10px rgba(140, 152, 164, 0.175); --s-shadow-soft: 0 6px 12px rgba(140, 152, 164, 0.075); /* ---- Transitions ---- */ --s-transition-fast: 0.15s ease-in-out; --s-transition-normal: 0.25s ease-in-out; --s-transition-slow: 0.4s ease-in-out; --s-transition: var(--s-transition-fast); /* ---- Z-Index ---- */ --s-z-dropdown: 100; --s-z-sticky: 200; --s-z-overlay: 300; --s-z-modal: 400; --s-z-toast: 500; } /* ========================================================================== Dark Mode — Token Overrides Ativado via Bootstrap 5 data-bs-theme="dark" no . Apenas tokens que mudam sao listados aqui. ========================================================================== */ [data-bs-theme="dark"] { /* ---- Primary Palette (mais brilhante para contraste em fundo escuro) ---- */ --s-primary-900: #c8c4f9; --s-primary-700: #a59df5; --s-primary-500: #7b73f0; --s-primary-300: #574fec; --s-primary-100: #1e1a3e; --s-primary: var(--s-primary-500); --s-primary-hover: #8e88f3; --s-primary-light: var(--s-primary-100); --s-primary-dark: #9a95f4; /* ---- Secondary (Verde Teal) ---- */ --s-secondary-700: #5EEAD4; --s-secondary-500: #2DD4BF; --s-secondary-300: #14B8A6; --s-secondary-100: #0c2e28; /* ---- Gray Scale (invertida para superficies escuras) ---- */ --s-gray-900: #F8FAFC; --s-gray-800: #F1F5F9; --s-gray-700: #E2E8F0; --s-gray-600: #CBD5E1; --s-gray-500: #94A3B8; --s-gray-400: #64748B; --s-gray-300: #475569; --s-gray-200: #334155; --s-gray-100: #1E293B; --s-gray-50: #0F172A; /* ---- Semantic Colors (mais brilhantes, fundos mais sutis) ---- */ --s-success: #7ccf3f; --s-success-light: rgba(124, 207, 63, 0.15); --s-success-dark: #a7d683; --s-warning: #fce7ad; --s-warning-light: rgba(252, 231, 173, 0.12); --s-warning-dark: #fad776; --s-danger: #fa95a0; --s-danger-light: rgba(250, 149, 160, 0.12); --s-danger-dark: #f64e60; --s-info: #abf1fa; --s-info-light: rgba(171, 241, 250, 0.12); --s-info-dark: #73e7f7; /* ---- Backgrounds ---- */ --s-bg-light: #0F172A; --s-bg-card: #1E293B; --s-body: #F8FAFC; /* ---- Borders ---- */ --s-border: #334155; /* ---- Focus Ring ---- */ --s-focus-ring: rgba(123, 115, 240, 0.25); /* ---- Text ---- */ --s-text-primary: #F1F5F9; --s-text-secondary: #94A3B8; --s-text-muted: #64748B; --s-text-inverse: #0F172A; /* ---- Shadows (preto, mais opacas para superficies escuras) ---- */ --s-shadow-xs: 0 0 25px rgba(0, 0, 0, 0.20); --s-shadow-sm: 0 0 35px rgba(0, 0, 0, 0.25); --s-shadow-md: 0 0 35px rgba(0, 0, 0, 0.30); --s-shadow: var(--s-shadow-md); --s-shadow-lg: 0 10px 40px 10px rgba(0, 0, 0, 0.35); --s-shadow-soft: 0 6px 12px rgba(0, 0, 0, 0.15); }