/* CloudShark Labs v4.0 site overlay for the synced Leak calculator.
   Values mirror data/brand.json; tests prevent the two sources from drifting. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --brand-primary-navy: #0D1B2A;
  --brand-logo-orange: #EA6A12;
  --brand-wave-blue: #0B4EAE;
  --brand-wave-blue-on-dark: #8AB4FF;
  --brand-supporting-gray: #64748B;
  --brand-supporting-gray-on-dark: #C7D2E0;
  --brand-white: #FFFFFF;
  --brand-ui-orange: #F97316;
  --brand-font-family: "Plus Jakarta Sans";
  --brand-wordmark-weight: 800;
  --brand-tagline-weight: 500;

  --bg: var(--brand-white);
  --surface: var(--brand-white);
  --surface-2: var(--brand-white);
  --ink: var(--brand-primary-navy);
  --ink-dim: var(--brand-supporting-gray);
  --accent: var(--brand-wave-blue);
  --accent-ink: var(--brand-primary-navy);
  --cta: var(--brand-ui-orange);
  --cta-hover: var(--brand-logo-orange);
  --leak: color-mix(in srgb, var(--brand-logo-orange) 90%, var(--brand-primary-navy));
  --border: color-mix(in srgb, var(--brand-primary-navy) 24%, var(--brand-white));
  --focus: var(--brand-ui-orange);
  --font: var(--brand-font-family), "Avenir Next", Avenir, ui-sans-serif, system-ui, sans-serif;
  --packs-reserved-height: calc((var(--tap) * 2) + 0.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--brand-primary-navy);
    --surface: color-mix(in srgb, var(--brand-white) 7%, var(--brand-primary-navy));
    --surface-2: color-mix(in srgb, var(--brand-white) 12%, var(--brand-primary-navy));
    --ink: var(--brand-white);
    --ink-dim: var(--brand-supporting-gray-on-dark);
    --accent: var(--brand-wave-blue-on-dark);
    --accent-ink: var(--brand-primary-navy);
    --cta: var(--brand-ui-orange);
    --cta-hover: var(--brand-logo-orange);
    --leak: var(--brand-ui-orange);
    --border: color-mix(in srgb, var(--brand-white) 24%, var(--brand-primary-navy));
  }
}

.packs {
  min-height: var(--packs-reserved-height);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (min-width: 40rem) {
  .packs {
    --packs-reserved-height: var(--tap);
  }
}