/* ========================================================================== TouristicIq — Design Tokens Single source of truth for colors, spacing, typography, motion, elevation. Dark is default. data-theme="light" flips to light palette. If you change a value here, also update Theme/TiqTheme.cs. ========================================================================== */ :root { /* ---------- Brand ---------- */ --tiq-brand-primary: #0D9488; /* teal-600 */ --tiq-brand-primary-hover: #14B8A6; /* teal-500 */ --tiq-brand-primary-darken: #0F766E; /* teal-700 */ --tiq-brand-primary-lighten: #5EEAD4; /* teal-300 */ --tiq-brand-primary-subtle: rgba(13,148,136,0.12); --tiq-brand-primary-ghost: rgba(13,148,136,0.06); --tiq-brand-accent: #F59E0B; /* amber-500 */ --tiq-brand-accent-subtle: rgba(245,158,11,0.12); /* ---------- Semantic state (dark) ---------- */ --tiq-color-success: #10B981; --tiq-color-success-subtle: rgba(16,185,129,0.12); --tiq-color-warning: #F59E0B; --tiq-color-warning-subtle: rgba(245,158,11,0.12); --tiq-color-danger: #EF4444; --tiq-color-danger-subtle: rgba(239,68,68,0.12); --tiq-color-info: #3B82F6; --tiq-color-info-subtle: rgba(59,130,246,0.12); /* ---------- Surfaces (dark) ---------- */ --tiq-bg-base: #0A0A0A; /* app background */ --tiq-bg-surface: #141414; /* cards, panels */ --tiq-bg-raised: #1C1C1C; /* popovers, raised cards */ --tiq-bg-sunken: #050505; /* wells, inset */ --tiq-bg-hover: rgba(255,255,255,0.04); --tiq-bg-active: rgba(255,255,255,0.08); --tiq-bg-overlay: rgba(0,0,0,0.72); /* ---------- Borders (dark) ---------- */ --tiq-border-subtle: #1F1F1F; --tiq-border-default: #262626; --tiq-border-strong: #404040; --tiq-border-focus: var(--tiq-brand-primary-hover); /* ---------- Text (dark) ---------- */ --tiq-text-primary: #FAFAFA; --tiq-text-secondary: #A3A3A3; --tiq-text-tertiary: #737373; --tiq-text-disabled: #525252; --tiq-text-inverse: #0A0A0A; --tiq-text-brand: var(--tiq-brand-primary-hover); --tiq-text-success: var(--tiq-color-success); --tiq-text-warning: var(--tiq-color-warning); --tiq-text-danger: var(--tiq-color-danger); /* ---------- Typography ---------- */ --tiq-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --tiq-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --tiq-font-display: "Inter", -apple-system, sans-serif; --tiq-fs-xs: 0.6875rem; /* 11 */ --tiq-fs-sm: 0.75rem; /* 12 */ --tiq-fs-base: 0.8125rem; /* 13 */ --tiq-fs-md: 0.875rem; /* 14 */ --tiq-fs-lg: 1rem; /* 16 */ --tiq-fs-xl: 1.125rem; /* 18 */ --tiq-fs-2xl: 1.25rem; /* 20 */ --tiq-fs-3xl: 1.5rem; /* 24 */ --tiq-fs-4xl: 1.875rem; /* 30 */ --tiq-fs-5xl: 2.25rem; /* 36 */ --tiq-fw-regular: 400; --tiq-fw-medium: 500; --tiq-fw-semibold: 600; --tiq-fw-bold: 700; --tiq-lh-tight: 1.2; --tiq-lh-snug: 1.4; --tiq-lh-normal: 1.55; --tiq-lh-loose: 1.75; --tiq-ls-tight: -0.025em; --tiq-ls-snug: -0.015em; --tiq-ls-normal: -0.005em; --tiq-ls-wide: 0.08em; /* ---------- Spacing (4px base) ---------- */ --tiq-space-0: 0; --tiq-space-1: 4px; --tiq-space-2: 8px; --tiq-space-3: 12px; --tiq-space-4: 16px; --tiq-space-5: 20px; --tiq-space-6: 24px; --tiq-space-8: 32px; --tiq-space-10: 40px; --tiq-space-12: 48px; --tiq-space-16: 64px; /* ---------- Radius ---------- */ --tiq-radius-xs: 3px; --tiq-radius-sm: 4px; --tiq-radius-md: 6px; --tiq-radius-lg: 8px; --tiq-radius-xl: 12px; --tiq-radius-2xl: 16px; --tiq-radius-full: 9999px; /* ---------- Elevation (shadows — dark) ---------- */ --tiq-shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.25); --tiq-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2); --tiq-shadow-md: 0 4px 8px -2px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.2); --tiq-shadow-lg: 0 10px 24px -6px rgba(0,0,0,0.45), 0 4px 10px rgba(0,0,0,0.25); --tiq-shadow-xl: 0 20px 40px -10px rgba(0,0,0,0.55); --tiq-ring-focus: 0 0 0 2px rgba(20,184,166,0.35); --tiq-ring-focus-tight: 0 0 0 2px var(--tiq-bg-base), 0 0 0 4px rgba(20,184,166,0.55); /* ---------- Control heights (unify buttons, inputs, chips) ---------- */ --tiq-control-xs: 22px; /* chip */ --tiq-control-sm: 32px; /* dense button */ --tiq-control-md: 36px; /* default button, icon button */ --tiq-control-lg: 40px; /* input, select */ --tiq-control-xl: 48px; /* auth field, primary CTA */ /* ---------- Motion ---------- */ --tiq-ease: cubic-bezier(0.4, 0, 0.2, 1); --tiq-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --tiq-duration-fast: 120ms; --tiq-duration-base: 180ms; --tiq-duration-slow: 260ms; --tiq-transition-base: all var(--tiq-duration-base) var(--tiq-ease); /* ---------- Layout ---------- */ --tiq-appbar-height: 56px; --tiq-drawer-width: 154px; /* 30 % schmaler als ehemals 220px */ --tiq-drawer-rail-width: 64px; --tiq-z-drawer: 1000; --tiq-z-appbar: 1100; --tiq-z-popover: 1200; --tiq-z-dialog: 1300; --tiq-z-snackbar: 1400; --tiq-z-tooltip: 1600; /* ========================================================================== MudBlazor palette mapping (dark) These variables are what MudBlazor components read. Keeping them aliased to --tiq-* means theming the whole app is a single-source edit. ========================================================================== */ --mud-palette-primary: var(--tiq-brand-primary); --mud-palette-primary-text: #FFFFFF; --mud-palette-primary-darken: var(--tiq-brand-primary-darken); --mud-palette-primary-lighten: var(--tiq-brand-primary-lighten); --mud-palette-primary-hover: var(--tiq-brand-primary-subtle); --mud-palette-secondary: var(--tiq-brand-accent); --mud-palette-secondary-text: #0A0A0A; --mud-palette-secondary-darken: #B45309; --mud-palette-secondary-lighten: #FCD34D; --mud-palette-secondary-hover: var(--tiq-brand-accent-subtle); --mud-palette-info: var(--tiq-color-info); --mud-palette-info-text: #FFFFFF; --mud-palette-success: var(--tiq-color-success); --mud-palette-success-text: #FFFFFF; --mud-palette-warning: var(--tiq-color-warning); --mud-palette-warning-text: #0A0A0A; --mud-palette-error: var(--tiq-color-danger); --mud-palette-error-text: #FFFFFF; --mud-palette-error-darken: #B91C1C; --mud-palette-error-lighten: #FCA5A5; --mud-palette-error-hover: var(--tiq-color-danger-subtle); --mud-palette-dark: #1C1C1C; --mud-palette-dark-text: var(--tiq-text-primary); --mud-palette-text-primary: var(--tiq-text-primary); --mud-palette-text-secondary: var(--tiq-text-secondary); --mud-palette-text-disabled: var(--tiq-text-disabled); --mud-palette-action-default: var(--tiq-text-secondary); --mud-palette-action-default-hover: var(--tiq-bg-hover); --mud-palette-action-disabled: var(--tiq-text-disabled); --mud-palette-action-disabled-background: var(--tiq-bg-hover); --mud-palette-surface: var(--tiq-bg-surface); --mud-palette-background: var(--tiq-bg-base); --mud-palette-background-grey: var(--tiq-bg-surface); --mud-palette-lines-default: var(--tiq-border-subtle); --mud-palette-lines-inputs: var(--tiq-border-default); --mud-palette-divider: var(--tiq-border-subtle); --mud-palette-divider-light: var(--tiq-bg-surface); --mud-palette-appbar-background: var(--tiq-bg-base); --mud-palette-appbar-text: var(--tiq-text-primary); --mud-palette-drawer-background: var(--tiq-bg-base); --mud-palette-drawer-text: var(--tiq-text-secondary); --mud-palette-drawer-icon: var(--tiq-text-tertiary); --mud-palette-black: #000000; --mud-palette-white: #FFFFFF; --mud-palette-overlay-dark: var(--tiq-bg-overlay); --mud-palette-overlay-light: rgba(0,0,0,0.35); --mud-palette-table-lines: var(--tiq-border-subtle); --mud-palette-table-striped: var(--tiq-bg-sunken); --mud-palette-table-hover: var(--tiq-bg-hover); --mud-palette-gray-default: var(--tiq-text-secondary); --mud-palette-gray-light: #404040; --mud-palette-gray-lighter: #262626; --mud-palette-gray-dark: #737373; --mud-palette-gray-darker: #262626; --mud-default-borderradius: var(--tiq-radius-lg); --mud-appbar-height: var(--tiq-appbar-height); --mud-drawer-width-left: var(--tiq-drawer-width); --mud-drawer-width-right: 280px; --mud-drawer-width-mini-left: var(--tiq-drawer-rail-width); --mud-drawer-width-mini-right: var(--tiq-drawer-rail-width); --mud-typography-default-family: var(--tiq-font-sans); --mud-typography-default-size: var(--tiq-fs-md); --mud-typography-default-weight: var(--tiq-fw-regular); --mud-typography-default-lineheight: var(--tiq-lh-normal); --mud-typography-default-letterspacing: var(--tiq-ls-normal); --mud-typography-button-transform: none; --mud-typography-button-size: var(--tiq-fs-base); --mud-typography-button-weight: var(--tiq-fw-medium); --mud-typography-button-letterspacing: var(--tiq-ls-normal); --mud-zindex-appbar: var(--tiq-z-appbar); --mud-zindex-drawer: var(--tiq-z-drawer); --mud-zindex-dialog: var(--tiq-z-dialog); --mud-zindex-popover: var(--tiq-z-popover); --mud-zindex-snackbar: var(--tiq-z-snackbar); --mud-zindex-tooltip: var(--tiq-z-tooltip); } /* ========================================================================== Light theme — flips palette, keeps brand. Activate with ========================================================================== */ :root[data-theme="light"] { /* Semantic state (light) */ --tiq-color-success: #059669; --tiq-color-success-subtle: rgba(5,150,105,0.10); --tiq-color-warning: #D97706; --tiq-color-warning-subtle: rgba(217,119,6,0.10); --tiq-color-danger: #DC2626; --tiq-color-danger-subtle: rgba(220,38,38,0.08); --tiq-color-info: #2563EB; --tiq-color-info-subtle: rgba(37,99,235,0.08); /* Surfaces */ --tiq-bg-base: #FAFAFA; --tiq-bg-surface: #FFFFFF; --tiq-bg-raised: #FFFFFF; --tiq-bg-sunken: #F5F5F5; --tiq-bg-hover: rgba(10,10,10,0.04); --tiq-bg-active: rgba(10,10,10,0.06); --tiq-bg-overlay: rgba(10,10,10,0.45); /* Borders */ --tiq-border-subtle: #EEEEEE; --tiq-border-default: #E5E5E5; --tiq-border-strong: #D4D4D4; /* Text */ --tiq-text-primary: #0A0A0A; --tiq-text-secondary: #525252; --tiq-text-tertiary: #737373; --tiq-text-disabled: #A3A3A3; --tiq-text-inverse: #FAFAFA; --tiq-text-brand: var(--tiq-brand-primary); /* Elevation (softer in light mode) */ --tiq-shadow-xs: 0 1px 2px 0 rgba(10,10,10,0.04); --tiq-shadow-sm: 0 1px 3px 0 rgba(10,10,10,0.08), 0 1px 2px rgba(10,10,10,0.04); --tiq-shadow-md: 0 4px 8px -2px rgba(10,10,10,0.08), 0 2px 4px rgba(10,10,10,0.04); --tiq-shadow-lg: 0 10px 24px -6px rgba(10,10,10,0.10), 0 4px 10px rgba(10,10,10,0.05); --tiq-shadow-xl: 0 20px 40px -10px rgba(10,10,10,0.15); /* MudBlazor palette — light overrides */ --mud-palette-primary-text: #FFFFFF; --mud-palette-secondary-text: #0A0A0A; --mud-palette-warning-text: #FFFFFF; --mud-palette-text-primary: var(--tiq-text-primary); --mud-palette-text-secondary: var(--tiq-text-secondary); --mud-palette-text-disabled: var(--tiq-text-disabled); --mud-palette-action-default: var(--tiq-text-secondary); --mud-palette-action-default-hover: var(--tiq-bg-hover); --mud-palette-surface: var(--tiq-bg-surface); --mud-palette-background: var(--tiq-bg-base); --mud-palette-background-grey: var(--tiq-bg-sunken); --mud-palette-lines-default: var(--tiq-border-default); --mud-palette-lines-inputs: var(--tiq-border-strong); --mud-palette-divider: var(--tiq-border-subtle); --mud-palette-divider-light: var(--tiq-border-subtle); --mud-palette-appbar-background: var(--tiq-bg-surface); --mud-palette-appbar-text: var(--tiq-text-primary); --mud-palette-drawer-background: var(--tiq-bg-surface); --mud-palette-drawer-text: var(--tiq-text-secondary); --mud-palette-drawer-icon: var(--tiq-text-tertiary); --mud-palette-overlay-dark: var(--tiq-bg-overlay); --mud-palette-overlay-light: rgba(10,10,10,0.2); --mud-palette-table-lines: var(--tiq-border-subtle); --mud-palette-table-striped: var(--tiq-bg-sunken); --mud-palette-table-hover: var(--tiq-bg-hover); --mud-palette-dark: #262626; --mud-palette-dark-text: var(--tiq-text-inverse); --mud-palette-gray-default: var(--tiq-text-secondary); --mud-palette-gray-light: #D4D4D4; --mud-palette-gray-lighter: #E5E5E5; --mud-palette-gray-dark: #737373; --mud-palette-gray-darker: #A3A3A3; } /* ========================================================================== Base body — uses tokens so both themes work ========================================================================== */ html, body { font-family: var(--tiq-font-sans); font-size: var(--tiq-fs-md); line-height: var(--tiq-lh-normal); background-color: var(--tiq-bg-base); color: var(--tiq-text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01", "ss03"; font-variant-numeric: tabular-nums; } ::selection { background: var(--tiq-brand-primary-subtle); color: var(--tiq-text-primary); } /* Scrollbar — neutral, themable */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--tiq-border-default); border-radius: var(--tiq-radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--tiq-border-strong); } /* Focus ring — a11y. Each component handles its own focus state (Mud inputs have their own teal fieldset border, buttons have their ripple, etc.), so we only keep a visible outline-based fallback for plain links / summaries. */ :focus-visible { outline: none; } a:focus-visible, details > summary:focus-visible { outline: 2px solid var(--tiq-brand-primary); outline-offset: 2px; border-radius: var(--tiq-radius-sm); }