:root {
--sy-primary: #1f3d63;
--sy-primary-dark: #152c49;
--sy-primary-light: #345d92;
--sy-primary-soft: rgba(31, 61, 99, 0.10);
--sy-on-primary: #ffffff;
--sy-accent: #00A9C1;
--sy-accent-rgb: 0, 169, 193;
--sy-primary-rgb: 31, 61, 99;
--sy-danger-rgb: 217, 45, 32;
--sy-accent-dark: #00889B;
--sy-accent-soft: rgba(var(--sy-accent-rgb), 0.12);
--sy-accent-ink: #077286;
--sy-tint: #E7F4F6;
--sy-gradient-ia: linear-gradient(135deg, var(--sy-primary) 0%, var(--sy-accent-ink) 55%, var(--sy-accent) 100%);
--sy-glow-ia: rgba(var(--sy-accent-rgb), 0.38);
--sy-bg-app: #F6F9FA;
--sy-bg-surface: #ffffff;
--sy-bg-muted: #EDF3F4;
--sy-bg-hover: #eef1f6;
--sy-text-main: #17293D;
--sy-text-muted: #566173;
--sy-text-muted-soft: #6b7689;
--sy-text-secondary: #38424f;
--sy-text-light: #6a7788;
--sy-border: #e1e6ee;
--sy-border-light: #e8ebf1;
--sy-border-focus: #cfd6e1;
--sy-btn-border: color-mix(in srgb, var(--sy-text-muted) 62%, transparent);
--sy-success: #15924f;
--sy-success-dark: #0f7a40;
--sy-warning: #c9780a;
--sy-warning-dark: #b45309;
--sy-shadow-lg: 0 6px 18px rgba(15, 23, 42, .12);
--sy-danger: #d92d20;
--sy-danger-dark: #b42318;
--sy-danger-light: #fee2e2;
--sy-danger-border: #fecaca;
--sy-success-soft: rgba(21, 146, 79, 0.10);
--sy-success-light: #d1fae5;
--sy-warning-soft: rgba(201, 120, 10, 0.12);
--sy-warning-light: #fef3c7;
--sy-danger-soft: rgba(217, 45, 32, 0.10);
--sy-on-danger: #ffffff;
--sy-info-dark: var(--sy-accent-ink);
--sy-info-soft: rgba(var(--sy-accent-rgb), 0.10);
--sy-alert-warning-bg: #fff3cd;
--sy-alert-warning-border: #ffc107;
--sy-alert-warning-text: #856404;
--sy-alert-info-bg: #e0f2fe;
--sy-alert-info-border: #0ea5e9;
--sy-alert-info-text: #0369a1;
--sy-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--sy-font-display: 'Space Grotesk', system-ui, sans-serif;
--sy-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Code', monospace;
--sy-text-2xs: 0.6875rem;
--sy-text-xs: 0.75rem;
--sy-text-13: 0.8125rem;
--sy-text-sm: 0.875rem;
--sy-text-15: 0.9375rem;
--sy-text-base: 1rem;
--sy-text-lg: 1.125rem;
--sy-text-xl: 1.25rem;
--sy-text-2xl: 1.5rem;
--sy-text-3xl: 2rem;
--sy-text-4xl: 2.5rem;
--sy-form-label-size: 0.75rem;
--sy-form-help-size: 0.75rem;
--sy-form-heading-size: 0.8125rem;
--sy-space-1: 0.25rem;
--sy-space-2: 0.5rem;
--sy-space-3: 0.75rem;
--sy-space-4: 1rem;
--sy-space-5: 1.25rem;
--sy-space-6: 1.5rem;
--sy-space-8: 2rem;
--sy-space-10: 2.5rem;
--sy-space-12: 3rem;
--sy-space-16: 4rem;
--sy-gouttiere: 72px;
--sy-radius-sm: 7px;
--sy-radius-md: 10px;
--sy-radius-lg: 14px;
--sy-radius-xl: 16px;
--sy-header-height: 90px;
--sy-content-max-form: 1600px;
--sy-content-max-page: 1400px;
--sy-dock-w: 440px;
--sy-field-w-money: 160px;
--sy-field-w-date: 150px;
--sy-field-w-time: 130px;
--sy-field-w-num: 120px;
--sy-field-w-code: 240px;
--sy-field-w-sm: 260px;
--sy-field-w-iban: 440px;
--sy-field-w-max: 900px;
--sy-field-w-area: 1200px;
--sy-field-h: 34px;
--sy-focus-ring: 0 0 0 3px rgba(var(--sy-accent-rgb), 0.45);
--sy-focus-outline: 2px solid var(--sy-primary);
--sy-focus-offset: 2px;
--sy-z-sticky: 20;
--sy-z-dropdown: 80;
--sy-z-raised: 100;
--sy-z-fullscreen: 900;
--sy-z-header: 1000;
--sy-z-drawer: 1040;
--sy-z-dock: 1050;
--sy-z-popover: 1090;
--sy-z-modal-backdrop: 1100;
--sy-z-modal: 1110;
--sy-z-select: 1115;
--sy-z-toast: 1120;
--sy-z-cmdk: 1130;
--sy-z-top: 1140;
--sy-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--sy-shadow-card: 0 1px 2px rgba(13, 18, 28, 0.05), 0 1px 3px rgba(13, 18, 28, 0.07);
--sy-shadow-hover: 0 18px 40px -16px rgba(13, 18, 28, 0.30);
--sy-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--sy-shell-bg: #10151E;
--sy-shell-grad: linear-gradient(135deg, #171E2B 0%, #0C111A 100%);
--sy-shell-text: #c2c9d6;
--sy-shell-text-dim: #8b94a4;
--sy-shell-border: #212938;
--sy-shell-active: rgba(var(--sy-accent-rgb), 0.26);
--sy-shell-active-text: #BEEAF2;
--sy-shell-accent: #43C7DA;
}
@media (max-width: 1024px) {
:root {
--sy-field-h: 42px;
}
}
@media (pointer: fine) {
body.popup {
--sy-field-h: 34px;
}
}
:root, body {
--sy-text: var(--sy-text-main);
--sy-surface: var(--sy-bg-muted);
--sy-info: var(--sy-accent);
--sy-shadow: var(--sy-shadow-card);
--sy-radius: var(--sy-radius-md);
--sy-text-primary: var(--sy-text-main);
--sy-bg-secondary: var(--sy-bg-muted);
--sy-bg: var(--sy-bg-app);
--sy-bg-page: var(--sy-bg-app);
--sy-bg-card: var(--sy-bg-surface);
--sy-bg-subtle: var(--sy-bg-muted);
--sy-surface-2: var(--sy-bg-surface);
--sy-surface-alt: var(--sy-bg-surface);
--sy-hover: var(--sy-bg-hover);
--sy-border-strong: var(--sy-border-focus);
--sy-primary-ink: color-mix(in srgb, var(--sy-primary) 55%, var(--sy-text-main));
--sy-field-border: color-mix(in srgb, var(--sy-text-muted) 70%, transparent);
--sy-chip-radius: var(--sy-radius-sm);
--sy-font: var(--sy-font-sans);
--sy-font-base: var(--sy-font-sans);
--sy-primary-bg: var(--sy-primary-soft);
--sy-success-bg: var(--sy-success-soft);
--sy-success-ink: var(--sy-success-dark);
--sy-success-text: var(--sy-success-dark);
--sy-danger-bg: var(--sy-danger-soft);
--sy-warning-ink: var(--sy-warning-dark);
--sy-warn: var(--sy-warning-dark);
}
@media (max-width: 768px) {
:root {
--sy-header-height: 128px;
}
}
@media (max-width: 1024px) { :root { --sy-gouttiere: 52px; } }
@media (max-width: 768px)  { :root { --sy-gouttiere: 36px; } }
@media (max-width: 767px)  { :root { --sy-gouttiere: 24px; } }