/*
 * ScreenshotFiles brand system.
 * Source of truth: /brand/README-BRANDGUIDE.md and /brand/05_Website_Tokens.
 * Keep this file loaded before page-specific stylesheets.
 */
/*
 * WOFF2 first. The files carry the same glyph coverage as the TrueType
 * originals at roughly a third of the bytes, which is the single largest
 * saving on first paint. The TrueType files remain as a fallback and are
 * never downloaded by a browser that supports WOFF2.
 */
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-400.woff2") format("woff2"),
       url("/static/fonts/inter-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-500.woff2") format("woff2"),
       url("/static/fonts/inter-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-600.woff2") format("woff2"),
       url("/static/fonts/inter-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Sora";
  src: url("/static/fonts/sora-600.woff2") format("woff2"),
       url("/static/fonts/sora-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --sf-ink: #131417;
  --sf-paper: #e8e6e2;
  --sf-glow: #f7a753;
  --sf-glow-hover: #f29436;
  --sf-glow-soft: rgba(247, 167, 83, 0.14);
  --sf-steel: #5a5d64;
  --sf-canvas: #f4f3f0;
  --sf-white: #ffffff;
  --sf-font-display: "Sora", "Inter", system-ui, sans-serif;
  --sf-font-body: "Inter", system-ui, sans-serif;
  --sf-radius-card: 20px;
  --sf-radius-button: 12px;
  --sf-shadow-soft: 0 18px 55px rgba(19, 20, 23, 0.12);
  --sf-content-width: 1920px;
}

.brand-logo {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.brand-lockup-symbol {
  display: block;
  width: 46px;
  height: 42px;
  flex: 0 0 auto;
  object-fit: contain;
}

.brand-lockup-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.brand-lockup-name {
  color: #f7f6f2;
  font-family: var(--sf-font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.brand-lockup-tagline {
  color: #c8c9ce;
  font-family: var(--sf-font-body);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-lockup-tagline b {
  margin-inline: 3px;
  color: var(--sf-glow);
  font-weight: 600;
}

[data-theme="light"] .brand-lockup-name { color: var(--sf-ink); }
[data-theme="light"] .brand-lockup-tagline { color: var(--sf-steel); }

.brand-logo-main {
  width: 260px;
  height: 48px;
}

.brand-logo-light-theme { display: none; }

[data-theme="light"] .brand-logo-dark-theme { display: none; }
[data-theme="light"] .brand-logo-light-theme { display: block; }

.brand-logo-compact {
  width: 168px;
  height: 42px;
}

.brand-symbol {
  display: none;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

@media (max-width: 520px) {
  .brand-logo-main,
  [data-theme="light"] .brand-logo-light-theme { display: none; }
  .brand-symbol { display: block; }
  .brand-lockup-copy { display: none; }
  .brand-lockup-symbol { width: 42px; height: 40px; }
}