/* Sharktoothify brand layer: the approved palette, type and gradients (source: brand/source/technical/brand-tokens.css), self-hosted fonts,
   and a few derived tokens where the approved colours alone would fail contrast. Everything in the app reads these variables. */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/montserrat-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/montserrat-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:700;font-display:swap;src:url("fonts/montserrat-latin-700-italic.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),url("fonts/inter-latin-wght-normal.woff2") format("woff2")}

:root{
  /* approved palette */
  --st-abyss-navy:#071B30; --st-deep-ocean:#0E3D66; --st-reef-blue:#0F7FA6; --st-aqua-flow:#27D7C6; --st-seafoam:#9EF4E6; --st-sandstone:#D9C9A5;
  --st-gradient-ocean:linear-gradient(145deg,#071B30 0%,#0E3D66 60%,#0F7FA6 100%);
  --st-gradient-current:linear-gradient(125deg,#0F7FA6 0%,#27D7C6 75%,#9EF4E6 100%);
  /* approved type, with sensible system fallbacks; mono is for small labels only */
  --st-font-heading:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  --st-font-body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --st-font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* derived, for contrast (documented in brand/CONTRAST.md): Reef Blue is 4.6:1 on white, so it is the lightest blue allowed for text on light surfaces;
     Aqua Flow (1.7:1 on white) is for dark surfaces and for graphics only, with Abyss Navy text on top of it (10:1). */
  --st-text-on-light:#0B2540; --st-muted-on-light:#4A5C6B; --st-link-on-light:#0B6E94;
  --st-text-on-dark:#F2FAFD; --st-muted-on-dark:#B9D3E0;
  --st-surface-glass:rgba(7,27,48,.55); --st-border-glass:rgba(158,244,230,.22);
  --st-radius:14px; --st-shadow:0 10px 30px rgba(0,10,25,.35);
  --st-focus:0 0 0 3px rgba(39,215,198,.55);
}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Slim scroll bars: a translucent blue-aqua thumb on an invisible track, brighter on hover. Mid-tone so it shows on both the navy shell and white dialogs. */
:root { --st-sb-thumb: rgba(30, 150, 185, .55); --st-sb-thumb-hover: rgba(39, 215, 198, .85); }
* { scrollbar-width: thin; scrollbar-color: var(--st-sb-thumb) transparent; }
@supports selector(::-webkit-scrollbar) {
  @supports not (scrollbar-width: thin) {
    *::-webkit-scrollbar { width: 8px; height: 8px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb { background: var(--st-sb-thumb); border-radius: 8px; }
    *::-webkit-scrollbar-thumb:hover { background: var(--st-sb-thumb-hover); }
  }
}