@import url('/_content/Aedis.Theme.Brezza/fonts/manrope/manrope.css'); /* ============================================================ * Aedis · Brezza — Design Tokens (v2.x — :root, no theme switch) * ------------------------------------------------------------ * Tokens declared in :root. Active suite-wide on every page that * imports this file. No legacy fallback — single source of truth. * * Dark mode opt-in via [data-mode="dark"] on . * * Bootstrap 5 custom-property overrides emitted in :root, so * existing Razor markup that uses --bs-* automatically picks up * the Brezza look. * ============================================================ */ /* ─── Color primitives ─── */ :root { /* Indigo (primary) — oklch-curated electric blue */ --c-indigo-50: #EEF2FE; --c-indigo-100: #DDE4FC; --c-indigo-200: #B5C4F8; --c-indigo-300: #8AA2F2; --c-indigo-400: #5E80E9; --c-indigo-500: #2E5BCC; /* core */ --c-indigo-600: #2547A8; --c-indigo-700: #1B3686; --c-indigo-800: #122560; --c-indigo-900: #0B1840; --c-indigo-950: #060E26; /* Cool neutral (replaces Bootstrap gray, cooler) */ --c-neutral-0: #FFFFFF; --c-neutral-50: #F1F3F7; /* app bg (light) */ --c-neutral-100: #E4E7EF; /* tinted surface */ --c-neutral-200: #D2D7E2; --c-neutral-300: #B5BCCC; --c-neutral-400: #939AAE; --c-neutral-500: #7A8197; --c-neutral-600: #5A6178; --c-neutral-700: #3C4258; --c-neutral-800: #252A3D; --c-neutral-900: #181C28; --c-neutral-950: #0D1018; /* Spark / secondary (warm coral, intentional contrast) */ --c-coral-50: #FDEDE6; --c-coral-100: #FBD9CE; --c-coral-300: #F3A088; --c-coral-500: #E26446; --c-coral-700: #B33D22; --c-coral-900: #6B1F0C; /* Status families */ --c-success-50: #E1F0EA; --c-success-500: #1F8478; --c-success-700: #155F58; --c-warning-50: #FBE3BC; --c-warning-500: #D88718; --c-warning-700: #97580A; --c-danger-50: #FAD2DA; --c-danger-500: #D03B55; --c-danger-700: #8E1F38; --c-info-50: var(--c-indigo-50); --c-info-500: var(--c-indigo-500); --c-info-700: var(--c-indigo-700); /* ─── Semantic tokens · LIGHT (default) ─── */ --bg: var(--c-neutral-100); /* sfondo app — grigio cool, visibile su card bianche */ --bg-tint: var(--c-neutral-50); --surface: var(--c-neutral-0); --surface-2: var(--c-neutral-50); --surface-3: var(--c-neutral-100); --surface-inv: var(--c-neutral-900); --ink: var(--c-neutral-900); --ink-2: var(--c-neutral-700); --ink-3: var(--c-neutral-500); --ink-on-accent:#FFFFFF; --ink-on-dark: #FFFFFF; --border: #DDE1EB; --border-2: #C7CDDD; --border-strong:var(--c-neutral-300); --primary: var(--c-indigo-500); --primary-hover:var(--c-indigo-600); --primary-bg: var(--c-indigo-50); --primary-fg: var(--c-indigo-700); --accent: var(--c-coral-500); /* warm spark */ --accent-bg: var(--c-coral-100); --accent-fg: var(--c-coral-700); --success: var(--c-success-500); --success-bg: var(--c-success-50); --success-fg: var(--c-success-700); --warning: var(--c-warning-500); --warning-bg: var(--c-warning-50); --warning-fg: var(--c-warning-700); --danger: var(--c-danger-500); --danger-bg: var(--c-danger-50); --danger-fg: var(--c-danger-700); --focus-ring: color-mix(in oklab, var(--primary) 65%, transparent); /* ─── Typography ─── */ --font-sans: 'Manrope', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-display: 'Fraunces', 'Noto Naskh Arabic', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Base font-size del root (html) — scala rem coerente con la scala Brezza */ --base-font-size: 16px; /* Scale (modular, ~1.18 ratio) */ --fs-12: 0.75rem; /* 12 */ --fs-13: 0.8125rem; /* 13 */ --fs-14: 0.875rem; /* 14 — body baseline (>= per Anna 8h/giorno) */ --fs-15: 0.9375rem; /* 15 */ --fs-16: 1rem; /* 16 */ --fs-18: 1.125rem; /* 18 */ --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-28: 1.75rem; --fs-32: 2rem; --fs-40: 2.5rem; --fs-48: 3rem; --fs-56: 3.5rem; --lh-tight: 1.1; --lh-snug: 1.25; --lh-base: 1.5; --lh-loose: 1.65; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; /* ─── Spacing (4-based) ─── */ --sp-0: 0; --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-8: 2rem; /* 32 */ --sp-10: 2.5rem; /* 40 */ --sp-12: 3rem; /* 48 */ --sp-16: 4rem; /* 64 */ --sp-20: 5rem; /* 80 */ /* ─── Radii ─── */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 24px; --r-pill: 999px; /* ─── Shadows (warm-tinted to match aesthetic) ─── */ --shadow-xs: 0 1px 2px rgba(15, 22, 50, 0.04); --shadow-sm: 0 6px 14px -6px rgba(15, 22, 50, 0.10), 0 1px 2px rgba(15, 22, 50, 0.04); --shadow-md: 0 14px 28px -12px rgba(15, 22, 50, 0.14), 0 2px 6px -2px rgba(15, 22, 50, 0.06); --shadow-lg: 0 28px 56px -20px rgba(15, 22, 50, 0.22), 0 4px 10px -4px rgba(15, 22, 50, 0.08); --shadow-focus: 0 0 0 3px var(--focus-ring); /* ─── Motion ─── */ --dur-1: 90ms; --dur-2: 150ms; --dur-3: 240ms; --dur-4: 360ms; --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1); --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1); /* ─── Z-index ─── */ --z-sticky: 100; --z-modal: 1000; --z-toast: 2000; --z-tooltip: 3000; /* ─── Bootstrap 5 overrides (scoped) ─── */ --bs-primary: var(--primary); --bs-primary-rgb: 46, 91, 204; --bs-secondary: var(--accent); --bs-success: var(--success); --bs-info: var(--c-indigo-400); --bs-warning: var(--warning); --bs-danger: var(--danger); --bs-light: var(--bg-tint); --bs-dark: var(--ink); --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-font-sans-serif: var(--font-sans); --bs-font-monospace: var(--font-mono); --bs-body-font-family: var(--font-sans); --bs-body-font-size: var(--fs-14); --bs-body-line-height: var(--lh-base); --bs-border-color: var(--border); --bs-border-radius: var(--r-md); --bs-border-radius-sm: var(--r-sm); --bs-border-radius-lg: var(--r-lg); --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-hover); --bs-gray-100: var(--c-neutral-50); --bs-gray-200: var(--c-neutral-100); --bs-gray-300: var(--c-neutral-200); --bs-gray-400: var(--c-neutral-300); --bs-gray-500: var(--c-neutral-400); --bs-gray-600: var(--c-neutral-500); --bs-gray-700: var(--c-neutral-600); --bs-gray-800: var(--c-neutral-700); --bs-gray-900: var(--c-neutral-900); } /* ─── Bootstrap 5.3 component overrides ───────────────────── * Bootstrap 5.3 hard-codes color in component custom properties * (--bs-btn-bg, --bs-alert-bg, etc.) — overriding --bs-primary * alone is NOT enough. We re-route them to Brezza semantic tokens. * ─────────────────────────────────────────────────────────── */ /* Buttons */ .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary); } .btn-secondary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--c-coral-700); --bs-btn-hover-border-color: var(--c-coral-700); --bs-btn-active-bg: var(--c-coral-700); --bs-btn-active-border-color: var(--c-coral-700); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); } .btn-success { --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success); --bs-btn-hover-bg: var(--c-success-700); --bs-btn-hover-border-color: var(--c-success-700); --bs-btn-active-bg: var(--c-success-700); --bs-btn-active-border-color: var(--c-success-700); --bs-btn-disabled-bg: var(--success); --bs-btn-disabled-border-color: var(--success); } .btn-danger { --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-bg: var(--c-danger-700); --bs-btn-hover-border-color: var(--c-danger-700); --bs-btn-active-bg: var(--c-danger-700); --bs-btn-active-border-color: var(--c-danger-700); --bs-btn-disabled-bg: var(--danger); --bs-btn-disabled-border-color: var(--danger); } .btn-warning { --bs-btn-color: var(--ink); --bs-btn-bg: var(--warning); --bs-btn-border-color: var(--warning); --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--c-warning-700); --bs-btn-hover-border-color: var(--c-warning-700); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--c-warning-700); --bs-btn-active-border-color: var(--c-warning-700); --bs-btn-disabled-color: var(--ink); --bs-btn-disabled-bg: var(--warning); --bs-btn-disabled-border-color: var(--warning); } .btn-info { --bs-btn-bg: var(--c-indigo-400); --bs-btn-border-color: var(--c-indigo-400); --bs-btn-hover-bg: var(--c-indigo-500); --bs-btn-hover-border-color: var(--c-indigo-500); --bs-btn-active-bg: var(--c-indigo-500); --bs-btn-active-border-color: var(--c-indigo-500); --bs-btn-disabled-bg: var(--c-indigo-400); --bs-btn-disabled-border-color: var(--c-indigo-400); } .btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--primary); --bs-btn-active-border-color: var(--primary); --bs-btn-disabled-color: var(--primary); --bs-btn-disabled-border-color: var(--primary); } .btn-link { --bs-btn-color: var(--primary); --bs-btn-hover-color: var(--primary-hover); --bs-btn-active-color: var(--primary-hover); } /* Alerts */ .alert-primary { --bs-alert-color: var(--primary-fg); --bs-alert-bg: var(--primary-bg); --bs-alert-border-color: var(--c-indigo-200); --bs-alert-link-color: var(--primary-fg); } .alert-secondary { --bs-alert-color: var(--accent-fg); --bs-alert-bg: var(--accent-bg); --bs-alert-border-color: var(--c-coral-100); } .alert-success { --bs-alert-color: var(--success-fg); --bs-alert-bg: var(--success-bg); --bs-alert-border-color: var(--success); --bs-alert-link-color: var(--success-fg); } .alert-warning { --bs-alert-color: var(--warning-fg); --bs-alert-bg: var(--warning-bg); --bs-alert-border-color: var(--warning); --bs-alert-link-color: var(--warning-fg); } .alert-danger { --bs-alert-color: var(--danger-fg); --bs-alert-bg: var(--danger-bg); --bs-alert-border-color: var(--danger); --bs-alert-link-color: var(--danger-fg); } .alert-info { --bs-alert-color: var(--c-indigo-700); --bs-alert-bg: var(--c-info-50); --bs-alert-border-color: var(--c-indigo-200); } /* Badges (default Bootstrap badge bg is hardcoded too) */ .badge.bg-primary { background-color: var(--primary) !important; } .badge.bg-secondary { background-color: var(--accent) !important; } .badge.bg-success { background-color: var(--success) !important; } .badge.bg-warning { background-color: var(--warning) !important; color: var(--ink) !important; } .badge.bg-danger { background-color: var(--danger) !important; } .badge.bg-info { background-color: var(--c-indigo-400) !important; } /* Cards (--bs-card-bg fix per Bootstrap 5.3) */ .card { --bs-card-bg: var(--surface); --bs-card-color: var(--ink); --bs-card-border-color: var(--border); --bs-card-cap-bg: var(--surface-2); --bs-card-cap-color: var(--ink); --bs-card-border-radius: var(--r-lg); --bs-card-inner-border-radius: calc(var(--r-lg) - 1px); box-shadow: var(--shadow-sm); } /* Form controls */ .form-control, .form-select { --bs-body-bg: var(--surface); border-color: var(--border); border-radius: var(--r-md); } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: var(--shadow-focus); } .form-label { font-weight: var(--fw-medium); color: var(--ink-2); } /* Links */ a { color: var(--primary); } a:hover { color: var(--primary-hover); } /* ─── DARK MODE — same scope, mode toggle ─── */ [data-mode="dark"] { --bg: #0D1018; --bg-tint: #131826; --surface: #161B2A; --surface-2: #1C2236; --surface-3: #232A42; --surface-inv: #ECEEF6; --ink: #ECEEF6; --ink-2: #B9BECE; --ink-3: #797F95; --ink-on-accent:#0D1018; --ink-on-dark: #ECEEF6; --border: #262C40; --border-2: #2F3650; --border-strong:#3D4567; --primary: #6588FF; /* lighter indigo for dark contrast */ --primary-hover:#7E9CFF; --primary-bg: #1B2647; --primary-fg: #B5C4F8; --accent: #FF7E61; /* lighter coral spark */ --accent-bg: #3B1A12; --accent-fg: #FBD9CE; --success: #4BC4A7; --success-bg: #0F2E2A; --success-fg: #A9E8D9; --warning: #F0AC52; --warning-bg: #3A2510; --warning-fg: #F8DCAA; --danger: #F25976; --danger-bg: #3B1424; --danger-fg: #F4A8BA; --focus-ring: color-mix(in oklab, var(--primary) 70%, transparent); --shadow-sm: 0 6px 14px -6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 14px 28px -12px rgba(0, 0, 0, 0.50), 0 2px 6px -2px rgba(0, 0, 0, 0.30); --shadow-lg: 0 28px 56px -20px rgba(0, 0, 0, 0.60), 0 4px 10px -4px rgba(0, 0, 0, 0.35); /* Bootstrap dark mode echoes */ --bs-primary: var(--primary); --bs-primary-rgb: 101, 136, 255; --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-border-color: var(--border); --bs-light: var(--surface-2); --bs-dark: var(--ink); color-scheme: dark; } /* ─── Root font-size (base rem scale) ─── */ html { font-size: var(--base-font-size); } /* ─── Body baseline (always active) ─── */ /* font-family Manrope ovunque, anche sui discendenti. !important garantisce che vinca su qualsiasi override CSS legacy/vendor. Per varianti tipografiche specifiche usare le classi .t-display, .t-mono, .t-eyebrow, .ax-kpi-value (escluse dall'override universale qui sotto). */ body { background: var(--bg); color: var(--ink); font-family: var(--font-sans) !important; font-size: var(--fs-14); line-height: var(--lh-base); font-feature-settings: "cv11", "ss01", "ss03"; } body :not(.t-display):not(.t-mono):not(.t-eyebrow):not(.ax-kpi-value):not(.ax-mark):not(.font-monospace):not(code):not(pre):not(kbd):not(.kbd):not([class*="bi-"]) { font-family: var(--font-sans) !important; } *:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); } /* ─── Typographic helpers ─── */ .t-display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; } .t-display em { color: var(--primary); font-style: italic; } .t-mono { font-family: var(--font-mono); } .t-eyebrow { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; } .t-num-tabular { font-variant-numeric: tabular-nums; }