/* Load after the portal's compiled app.css and sorek-tokens.css. */
:root {
  --color-ink: var(--sorek-bg);
  --color-panel: var(--sorek-surface);
  --color-panel2: var(--sorek-bg);
  --color-raise: var(--sorek-raised);
  --color-line: var(--sorek-line);
  --color-line2: var(--sorek-lilac);
  --color-accent: var(--sorek-mustard);
  --color-gold: var(--sorek-mustard);
  --color-gold-deep: var(--sorek-mustard-hover);
  --color-cream: var(--sorek-ink);
  --color-mute: var(--sorek-muted);
  --color-danger: var(--sorek-danger);
  --color-ok: var(--sorek-success);
  --font-display: var(--sorek-font-heading);
  --font-body: var(--sorek-font-body);
}
body {background: var(--sorek-bg); color: var(--sorek-ink); font-family: var(--sorek-font-body)}
:is(h1,h2,h3,h4) {font-family: var(--sorek-font-heading); font-weight: 400; font-synthesis: none; letter-spacing: .015em}
:is(a,button,input,select,summary):focus-visible {outline: 3px solid var(--sorek-mustard); outline-offset: 4px}
.portal-sidebar {background: var(--sorek-surface)}
.portal-brand {gap: 12px; font-size: 28px}
.portal-brand .sorek-logo {width: 42px; height: 42px; object-fit: contain; padding: 0; background: transparent; flex-shrink: 0}
.portal-brand small {font-size: 9px; letter-spacing: .06em}
.portal-nav-item.is-active {background: var(--sorek-raised); color: var(--sorek-mustard); border-left-color: var(--sorek-mustard)}
.portal-nav-item:hover {background: var(--sorek-raised)}
.portal-nav-item {min-height: 46px}
.portal-price {background: var(--sorek-raised); color: var(--sorek-mustard); border-color: var(--sorek-line)}
.garage-showcase {background: var(--sorek-surface); border-color: var(--sorek-line); box-shadow: 5px 5px 0 var(--sorek-violet)}
.garage-showcase-label {border-color: var(--sorek-line)}
.garage-showcase-stage {background-image: linear-gradient(rgba(var(--sorek-violet-rgb),.16) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--sorek-violet-rgb),.16) 1px,transparent 1px)}
.garage-showcase-screen {background: var(--sorek-bg)}
.garage-preview-button, .garage-preview-details {background: var(--sorek-raised); border-color: var(--sorek-line)}
.portal-design-card {background: var(--sorek-surface); border-color: var(--sorek-line)}
.portal-card-art {background: var(--sorek-bg); border-color: var(--sorek-line)}
.portal-design-card:hover {border-color: var(--sorek-mustard)}
.garage-create-card {background: var(--sorek-violet); border: 1px solid var(--sorek-lilac)}
.garage-create-card>p:not(.portal-eyebrow) {color: var(--sorek-ink)}
.garage-create-mark {border-color: var(--sorek-mustard)}
.portal-button {border-radius: 3px}
.portal-button-primary {color: var(--sorek-on-accent)}
.portal-button-primary:active {background: var(--sorek-gold-active); border-color: var(--sorek-gold-active)}
::selection {background: var(--sorek-selection); color: var(--sorek-bg)}
.portal-button-outline {border-color: var(--sorek-line)}
.portal-card-info h3 {font-size: 26px}
.garage-section-heading h2, .garage-how h2 {font-size: 36px}
.garage-intro h1 {font-size: clamp(48px,5.3vw,76px); line-height: 1.02}
.garage-intro-copy {font-size: 16px}
.portal-sidebar-bottom {background: var(--sorek-surface)}
@media(max-width: 640px) {
  .portal-brand {font-size: 26px}
  .portal-brand .sorek-logo {width: 36px; height: 36px}
  .garage-intro h1 {font-size: clamp(44px,10vw,62px)}
  .garage-section-heading h2, .garage-how h2 {font-size: 30px}
}
@media(prefers-reduced-motion: reduce) {
  * {scroll-behavior: auto!important; transition: none!important; animation: none!important}
}