/* SimonRossmann Core CSS - tokens, base styles, and semantic vanilla CSS infrastructure. */
@import url("./css/layout.css");
@import url("./css/typography.css");
@import url("./css/forms.css");
@import url("./css/feedback.css");
@import url("./css/overlays.css");
@import url("./css/navigation.css");
@import url("./css/data-display.css");
@import url("./css/date-time.css");
@import url("./css/media.css");

@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("./fonts/material-symbols-outlined.woff2") format("woff2");
}

:root {
  --ui-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ui-font-mono: var(--ui-font-sans);
  --ui-font-size-base: 16px;
  --ui-typo-display-xl: 5rem;
  --ui-typo-display-lg: 3.5rem;
  --ui-typo-display-md: 2.5rem;
  --ui-typo-headline: 1.75rem;
  --ui-typo-card-title: 1.375rem;
  --ui-typo-subhead: 1.25rem;
  --ui-typo-body-lg: 1.125rem;
  --ui-typo-body: 1rem;
  --ui-typo-body-sm: 0.875rem;
  --ui-typo-caption: 0.8125rem;
  --ui-typo-button: 0.875rem;
  --ui-typo-eyebrow: 0.75rem;
  --ui-space-hair: 1px;
  --ui-space-xxs: 0.25rem;
  --ui-space-xs: 0.5rem;
  --ui-space-sm: 0.75rem;
  --ui-space-md: 1rem;
  --ui-space-lg: 1.5rem;
  --ui-space-xl: 2rem;
  --ui-space-xxl: 3rem;
  --ui-space-section: 6rem;
  --ui-radius-xs: 0.25rem;
  --ui-radius-sm: 0.375rem;
  --ui-radius-md: 0.5rem;
  --ui-radius-lg: 0.75rem;
  --ui-radius-xl: 1rem;
  --ui-radius-2xl: 1.5rem;
  --ui-radius-full: 9999px;
  --ui-radius-panel: var(--ui-radius-lg);
  --ui-radius-shell: var(--ui-radius-2xl);
  --ui-layout-max-width: 110rem;
  --ui-sticky-top-offset: 4rem;
  --ui-border-thin: 1px;
  --ui-border-default: 1px;
  --ui-border-thick: 2px;
  --ui-opacity-disabled: 0.5;
  --ui-opacity-overlay: 0.62;
  --ui-opacity-muted: 0.68;
  --ui-transition-fast: 100ms;
  --ui-transition-default: 180ms;
  --ui-transition-slow: 320ms;
  --ui-ease-default: cubic-bezier(0.2, 0, 0, 1);
  --ui-focus-width: 1px;
  --ui-focus-offset: 2px;
  --ui-focus-color: var(--ui-color-accent-blue);
  --ui-icon-weight: 400;
  --ui-icon-grade: 0;
  --ui-icon-opsz: 20;
  --ui-icon-fill: 1;
  --ui-icon-scale: 1.35;
  --ui-color-canvas: #000000;
  --ui-color-inverse-canvas: #FFFFFF;
  --ui-color-inverse-ink: #000000;
  --ui-color-surface-1: #0D0F12;
  --ui-color-surface-2: #171A20;
  --ui-color-surface-3: #24272D;
  --ui-color-hairline: rgba(178, 182, 189, 0.10);
  --ui-color-hairline-soft: rgba(178, 182, 189, 0.07);
  --ui-color-border: rgba(178, 182, 189, 0.12);
  --ui-color-border-strong: rgba(178, 182, 189, 0.26);
  --ui-color-ink: #FFFFFF;
  --ui-color-ink-muted: #B2B6BD;
  --ui-color-ink-subtle: #656A76;
  --ui-color-on-strong: #FFFFFF;
  --ui-color-on-bright: #000000;
  --ui-color-accent-blue: #65A7FF;
  --ui-color-visited: #9B6BD3;
  --ui-color-status-info: #65A7FF;
  --ui-color-status-success: #00BC7E;
  --ui-color-status-warning: #FFD814;
  --ui-color-status-error: #EF4E5B;
  --ui-color-product-terraform: #7B42BC;
  --ui-color-product-terraform-bright: #9B6BD3;
  --ui-color-product-vault: #FFD814;
  --ui-color-product-consul: #EF4E5B;
  --ui-color-product-waypoint: #16D4D8;
  --ui-color-product-waypoint-deep: #0C8994;
  --ui-color-product-vagrant: #2F8CFF;
  --ui-color-product-nomad: #00BC7E;
  --ui-color-product-boundary: #FF7A66;
  --ui-color-amber-100: #FFE66D;
  --ui-color-amber-200: #FFD814;
  --ui-color-blue-7: #0B1F44;
  --ui-scrollbar-track: var(--ui-color-canvas);
  --ui-scrollbar-thumb: color-mix(in srgb, var(--ui-color-ink-muted) 36%, transparent);
  --ui-scrollbar-thumb-hover: color-mix(in srgb, var(--ui-color-ink-muted) 56%, transparent);
  --ui-depth-0-bg: var(--ui-color-canvas);
  --ui-depth-0-border: transparent;
  --ui-depth-1-bg: var(--ui-color-surface-1);
  --ui-depth-1-border: var(--ui-color-hairline);
  --ui-depth-2-bg: var(--ui-color-surface-2);
  --ui-depth-2-border: var(--ui-color-border);
  --ui-depth-3-bg: var(--ui-color-surface-3);
  --ui-depth-3-border: var(--ui-color-border-strong);
}
.dark { color-scheme: dark; }
.light {
  color-scheme: light;
  --ui-color-canvas: #F6F7F9;
  --ui-color-inverse-canvas: #0D0F12;
  --ui-color-inverse-ink: #FFFFFF;
  --ui-color-surface-1: #FFFFFF;
  --ui-color-surface-2: #ECEFF3;
  --ui-color-surface-3: #DDE2E8;
  --ui-color-hairline: rgba(13, 15, 18, 0.10);
  --ui-color-hairline-soft: rgba(13, 15, 18, 0.06);
  --ui-color-border: rgba(13, 15, 18, 0.14);
  --ui-color-border-strong: rgba(13, 15, 18, 0.28);
  --ui-color-ink: #0D0F12;
  --ui-color-ink-muted: #3F4652;
  --ui-color-ink-subtle: #69717E;
  --ui-color-on-strong: #FFFFFF;
  --ui-color-on-bright: #000000;
  --ui-color-accent-blue: #0A66C2;
  --ui-color-visited: #6B45A8;
  --ui-color-status-info: #0A66C2;
  --ui-color-status-success: #007A52;
  --ui-color-status-warning: #9B6A00;
  --ui-color-status-error: #C93545;
  --ui-color-product-terraform: #6F35B1;
  --ui-color-product-terraform-bright: #7B42BC;
  --ui-color-product-vault: #B88400;
  --ui-color-product-consul: #D6404D;
  --ui-color-product-waypoint: #08747D;
  --ui-color-product-waypoint-deep: #08747D;
  --ui-color-product-vagrant: #1769CC;
  --ui-color-product-nomad: #007A52;
  --ui-color-product-boundary: #D95745;
  --ui-color-amber-100: #8F6400;
  --ui-color-amber-200: #9B6A00;
  --ui-color-blue-7: #0B1F44;
}
*, *::before, *::after { box-sizing: border-box; border: 0 solid transparent; }
html { color-scheme: dark; scroll-behavior: smooth; scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-scrollbar-track); font-size: var(--ui-font-size-base); background: var(--ui-color-canvas); }
body { min-height: 100vh; margin: 0; background: var(--ui-color-canvas); color: var(--ui-color-ink); font-family: var(--ui-font-sans); font-weight: 500; line-height: 1.5; letter-spacing: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::-webkit-scrollbar { width: 0.75rem; height: 0.75rem; }
::-webkit-scrollbar-track { background: var(--ui-scrollbar-track); }
::-webkit-scrollbar-thumb { border: 0.1875rem solid transparent; border-radius: var(--ui-radius-full); background-color: var(--ui-scrollbar-thumb); background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--ui-scrollbar-thumb-hover); }
a { color: var(--ui-color-accent-blue); text-decoration: none; transition: color var(--ui-transition-default) var(--ui-ease-default); }
a:hover { color: var(--ui-color-accent-blue); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: 0; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select { appearance: none; border: 0 solid transparent; background: transparent; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-color-accent-blue); }
button { background: transparent; border: 0 solid transparent; }
button:not(:disabled), a[href], [role="button"] { cursor: pointer; }
button:disabled { cursor: not-allowed; }
img, svg, video, canvas { display: block; max-width: 100%; }
table { border-collapse: collapse; text-indent: 0; border-color: inherit; }
hr { border: 0; border-top: 1px solid var(--ui-color-border); }
::selection { background: color-mix(in srgb, var(--ui-color-accent-blue) 42%, transparent); color: var(--ui-color-ink); }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { appearance: textfield; }
input:focus::placeholder, textarea:focus::placeholder { opacity: 0; transition: opacity 0.15s ease; }
.material-symbols-outlined { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 1rem; line-height: 1; letter-spacing: 0; text-transform: none; display: inline-block; overflow: hidden; inline-size: 1em; white-space: nowrap; word-wrap: normal; direction: ltr; speak: never; -webkit-font-smoothing: antialiased; font-feature-settings: "liga"; font-variation-settings: 'FILL' var(--ui-icon-fill, 1), 'wght' var(--ui-icon-weight, 400), 'GRAD' var(--ui-icon-grade, 0), 'opsz' var(--ui-icon-opsz, 20); }
.layout-shell { max-width: var(--ui-layout-max-width); }
.flag-icon { display: inline-block; width: 1.1rem; height: 0.8rem; border: 1px solid color-mix(in srgb, var(--ui-color-ink) 28%, transparent); border-radius: var(--ui-radius-xs); outline: 1px solid rgba(255,255,255,0.14); outline-offset: -1px; overflow: hidden; }
.flag-en { background: linear-gradient(to bottom, transparent 40%, #c81d25 40%, #c81d25 60%, transparent 60%), linear-gradient(to right, transparent 42%, #c81d25 42%, #c81d25 58%, transparent 58%), #f8fafc; }
.flag-de { background: linear-gradient(to bottom, #111827 0 33%, #c81d25 33% 66%, #eab308 66% 100%); }
.si-sticky-top-offset { top: var(--ui-sticky-top-offset); }
.si-table-align-top { vertical-align: top; }
.si-table-align-middle { vertical-align: middle; }
.si-table-align-bottom { vertical-align: bottom; }
.simonrossmann-float { position: fixed; inset: auto; margin: 0; }
.simonrossmann-float-bottom { top: anchor(end); left: anchor(start); margin-top: 4px; }
.simonrossmann-float-bottom-center { top: anchor(end); left: anchor(center); translate: -50% 0; margin-top: 4px; }
.simonrossmann-float-bottom-end { top: anchor(end); right: anchor(end); margin-top: 4px; }
.simonrossmann-float-top { bottom: anchor(start); left: anchor(start); margin-bottom: 4px; }
.simonrossmann-float-top-center { bottom: anchor(start); left: anchor(center); translate: -50% 0; margin-bottom: 4px; }
.simonrossmann-float-top-end { bottom: anchor(start); right: anchor(end); margin-bottom: 4px; }
.simonrossmann-float-right { left: anchor(end); top: anchor(start); margin-left: 4px; }
.simonrossmann-float-left { right: anchor(start); top: anchor(start); margin-right: 4px; }
.simonrossmann-float-flip { position-try-fallbacks: flip-block, flip-inline; }
.simonrossmann-float-flip.simonrossmann-float-bottom-center, .simonrossmann-float-flip.simonrossmann-float-top-center { position-try-fallbacks: flip-block; }
.simonrossmann-float-match-width { min-width: anchor-size(width); }
.simonrossmann-feature-card, .simonrossmann-product-card { border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); background: var(--ui-color-surface-1); color: var(--ui-color-ink); padding: var(--ui-space-lg); }
.simonrossmann-product-card-terraform { background: var(--ui-color-product-terraform); color: var(--ui-color-ink); }
.simonrossmann-product-card-vault { background: var(--ui-color-product-vault); color: var(--ui-color-canvas); }
.simonrossmann-product-card-waypoint { background: var(--ui-color-product-waypoint); color: var(--ui-color-canvas); }
.simonrossmann-cta-banner { border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-2xl); background: var(--ui-color-surface-1); color: var(--ui-color-ink); padding: var(--ui-space-xxl); }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--ui-color-status-success); outline-offset: 2px; }
.invalid { outline: 1px solid var(--ui-color-status-error); outline-offset: 2px; }
.validation-message { color: var(--ui-color-status-error); font-size: var(--ui-typo-caption); margin-top: var(--ui-space-xxs); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes indeterminate-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
@keyframes skeleton-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
@keyframes skeleton-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes menu-fade-in { from { opacity: 0; scale: 0.95; } to { opacity: 1; scale: 1; } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(0.35rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes cb-pop-in { 0% { transform: scale(0.6); opacity: 0; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,0.2,1); } }
.cb-pop { animation: cb-pop-in 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* Global semantic primitives. */
.si-bg-transparent { background-color: transparent; }
.si-ink { color: var(--ui-color-ink); }
.si-muted { color: var(--ui-color-ink-muted); }
.si-muted-weak { color: color-mix(in srgb, var(--ui-color-ink-muted) 80%, transparent); }
.si-w-full { width: 100%; }
.si-w-auto { width: auto; }
.si-group { position: relative; }
.si-depth-0 { background: var(--ui-depth-0-bg); border-color: var(--ui-depth-0-border); box-shadow: none; }
.si-depth-1 { background: var(--ui-depth-1-bg); border-color: var(--ui-depth-1-border); box-shadow: none; }
.si-depth-2 { background: var(--ui-depth-2-bg); border-color: var(--ui-depth-2-border); box-shadow: none; }
.si-depth-3 { background: var(--ui-depth-3-bg); border-color: var(--ui-depth-3-border); box-shadow: none; }
.si-hover-depth-0:hover { background: var(--ui-depth-0-bg); border-color: var(--ui-depth-0-border); box-shadow: none; }
.si-hover-depth-1:hover { background: var(--ui-depth-1-bg); border-color: var(--ui-depth-1-border); box-shadow: none; }
.si-hover-depth-2:hover { background: var(--ui-depth-2-bg); border-color: var(--ui-depth-2-border); box-shadow: none; }
.si-hover-depth-3:hover { background: var(--ui-depth-3-bg); border-color: var(--ui-depth-3-border); box-shadow: none; }
.si-state-disabled { cursor: not-allowed; opacity: 0.7; }
.si-state-muted-disabled { opacity: var(--ui-opacity-disabled); }
.si-state-noninteractive { pointer-events: none; }
.si-select-none { user-select: none; }
.si-text-on-color { color: #fff; }
.si-center-inline { margin-inline: auto; }
.si-push-inline-start { margin-inline-start: auto; }
.si-offset-xxs { margin-block-start: var(--ui-space-xxs); }
.si-offset-xs { margin-block-start: var(--ui-space-xs); }
.si-offset-sm { margin-block-start: var(--ui-space-sm); }
.si-offset-md { margin-block-start: var(--ui-space-md); }
.si-offset-lg { margin-block-start: var(--ui-space-lg); }
.si-offset-xl { margin-block-start: var(--ui-space-xl); }
.si-offset-xxl { margin-block-start: var(--ui-space-xxl); }
.si-offset-section { margin-block-start: var(--ui-space-section); }
.si-offset-after-xxs { margin-block-end: var(--ui-space-xxs); }
.si-offset-after-xs { margin-block-end: var(--ui-space-xs); }
.si-offset-after-sm { margin-block-end: var(--ui-space-sm); }
.si-offset-after-md { margin-block-end: var(--ui-space-md); }
.si-offset-after-lg { margin-block-end: var(--ui-space-lg); }
.si-offset-after-xl { margin-block-end: var(--ui-space-xl); }
.si-offset-after-xxl { margin-block-end: var(--ui-space-xxl); }
.si-offset-after-section { margin-block-end: var(--ui-space-section); }
.si-panel-min-width-md { min-width: 18rem; }
.si-control-shape-default { border-radius: var(--ui-radius-md); }
.si-control-shape-text { border-radius: 0; border-left-width: 0; border-right-width: 0; border-top-width: 0; }
.si-control-border-default { border-width: var(--ui-border-default); border-style: solid; }
.si-control-border-text { border-bottom-width: var(--ui-border-default); border-bottom-style: solid; }
.si-control-surface { background-color: var(--ui-color-surface-1); }
.si-control-border { border-color: var(--ui-color-hairline); }
.si-focus-control:focus-within { border-color: var(--ui-color-accent-blue); outline: var(--ui-focus-width) solid color-mix(in srgb, var(--ui-color-accent-blue) 72%, transparent); outline-offset: var(--ui-focus-offset); }
.si-surface-1 { background-color: var(--ui-color-surface-1); }
.si-border-hairline { border-color: var(--ui-color-hairline); }
.si-control-error { border-color: var(--ui-color-status-error); outline: 1px solid color-mix(in srgb, var(--ui-color-status-error) 72%, transparent); outline-offset: 2px; }
.si-control-error-text { border-bottom-color: var(--ui-color-status-error); outline: 1px solid var(--ui-color-status-error); outline-offset: 2px; }
.si-control-readonly { background-color: color-mix(in srgb, var(--ui-color-surface-2) 80%, var(--ui-color-surface-1)); }
.si-field-root > :not([hidden]) ~ :not([hidden]) { margin-top: var(--ui-space-xs); }
.si-input-shell { display: flex; align-items: center; gap: 0.5rem; transition: color var(--ui-transition-default) var(--ui-ease-default), background-color var(--ui-transition-default) var(--ui-ease-default), border-color var(--ui-transition-default) var(--ui-ease-default); }
.si-input-field { min-height: 2.75rem; padding: 0.625rem 0.875rem; }
.si-input-shell > * { min-width: 0; }
.si-input-element { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; }
.si-input-body { font-size: var(--ui-typo-body); line-height: 1.5; }
.si-input-default-tone { color: var(--ui-color-ink); }
.si-input-default-tone::placeholder { color: color-mix(in srgb, var(--ui-color-ink-muted) 80%, transparent); }
.si-input-disabled-tone { cursor: not-allowed; color: var(--ui-color-ink-muted); }
.si-input-disabled-tone::placeholder { color: color-mix(in srgb, var(--ui-color-ink-muted) 80%, transparent); }
.si-input-filled-placeholder::placeholder { color: color-mix(in srgb, currentColor 50%, transparent); }
.si-field-label { display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%; min-width: 0; overflow-wrap: anywhere; font-size: var(--ui-typo-body-sm); line-height: 1.5; font-weight: 600; color: var(--ui-color-ink); }
.si-field-affix { flex-shrink: 0; font-size: var(--ui-typo-body-sm); font-weight: 600; }
.si-field-adornment-icon { flex-shrink: 0; font-size: 1.125rem; }
.si-field-clear { display: inline-flex; flex-shrink: 0; cursor: pointer; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--ui-radius-full); transition: opacity var(--ui-transition-default) var(--ui-ease-default); }
.si-field-clear:hover { opacity: 0.7; }
.si-field-clear:disabled { pointer-events: none; opacity: 0; }
.si-input-action { width: 1.75rem; height: 1.75rem; }
.si-drag-placeholder { border: 2px dashed var(--ui-color-border); border-radius: var(--ui-radius-md); opacity: 0.6; }
.si-drag-item-lifted { opacity: 0.75; transform: scale(1.05); background: var(--ui-depth-2-bg); border-color: var(--ui-depth-2-border); box-shadow: none; }
.si-drag-container-active { outline: 2px solid color-mix(in srgb, var(--ui-color-accent-blue) 72%, transparent); outline-offset: 2px; }