/* Spectra Portal Site Tokens
   Public-site bridge tokens built from Spectra Framework tokens.
   These are site-level values, not framework primitives.
*/

:root{
  --sv-page-max:calc(var(--sp-container-max) + (var(--sp-8) * 2));
  --sv-page-pad:calc(var(--sp-4) + var(--sp-2));
  --sv-header-h:calc(var(--sp-10) + var(--sp-6));
  --sv-section-pad:clamp(calc(var(--sp-8) + var(--sp-4)), 7vh, calc(var(--sp-10) + var(--sp-8)));
  --sv-display-lh:calc(var(--sp-lh-1) - ((var(--sp-lh-2) - var(--sp-lh-1)) / 2));
  --sv-code-lh:calc(var(--sp-lh-3) + ((var(--sp-lh-2) - var(--sp-lh-1)) / 2));

  --sv-text-strong:color-mix(in srgb, var(--sp-text) 96%, white);
  --sv-text-muted:var(--sp-text-muted);

  --sv-shell-blue:color-mix(in srgb, var(--sp-info) 42%, var(--sp-accent) 58%);
  --sv-shell-violet:color-mix(in srgb, var(--sp-info) 48%, var(--sp-accent) 52%);
  --sv-border-soft:color-mix(in srgb, var(--sp-accent) 20%, transparent);
  --sv-border-faint:color-mix(in srgb, var(--sp-accent) 10%, transparent);

  --sv-surface-base:color-mix(in srgb, var(--sp-surface) 88%, var(--sv-shell-blue) 8%);
  --sv-surface-soft:color-mix(in srgb, var(--sv-surface-base) 92%, transparent);
  --sv-surface-strong:color-mix(in srgb, var(--sp-surface-2) 88%, var(--sv-shell-blue) 8%);

  --sp-web-shell-page-max:var(--sv-page-max);
  --sp-web-shell-page-pad:var(--sv-page-pad);
  --sp-web-shell-header-h:var(--sv-header-h);
  --sp-web-shell-section-pad:var(--sv-section-pad);
  --sp-web-shell-accent:var(--sv-shell-blue);
  --sp-web-shell-violet:var(--sv-shell-violet);
  --sp-web-shell-border:var(--sv-border-soft);
  --sp-web-shell-border-faint:var(--sv-border-faint);
  --sp-web-shell-surface:var(--sv-surface-base);

  --sv-auth-card-w:29rem;
  --sv-auth-card-border:color-mix(in srgb, var(--sp-accent) 20%, transparent);
  --sv-auth-card-bg:
    linear-gradient(180deg,
      color-mix(in srgb, var(--sp-surface) 92%, var(--sp-accent) 4%),
      color-mix(in srgb, var(--sp-surface) 84%, black 12%));
  --sv-auth-card-shadow:
    0 var(--sp-8) calc(var(--sp-10) + var(--sp-8)) color-mix(in srgb, black 42%, transparent),
    0 var(--sp-0) var(--sp-8) color-mix(in srgb, var(--sp-accent) 10%, transparent);
}

@media (max-width:40rem){
  :root{
    --sv-header-h:auto;
  }
}