/* fudge3d base.css - font-face, reset, type scale, focus ring. References tokens.css only. */

/* ---- font-face: self-hosted variable fonts, no CDN ---- */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/nunito-sans/nunito-sans-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter/inter-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono/jetbrains-mono-variable.woff2') format('woff2');
}

/* ---- font stacks ---- */
:root {
  --f3-font-brand: 'Nunito Sans', 'Segoe UI', -apple-system, system-ui, sans-serif;
  --f3-font-interface: 'Inter', 'Segoe UI', -apple-system, system-ui, sans-serif;
  --f3-font-mono: 'JetBrains Mono', 'Cascadia Mono', 'SF Mono', Consolas, monospace;
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  font-family: var(--f3-font-interface);
  color: var(--f3-text-primary);
  background: var(--f3-surface-canvas);
  line-height: 1.5;
}
img, picture, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }

/* ---- type scale: website and dashboard (design doc 3.3) ---- */
.web-display { font-family: var(--f3-font-brand); font-weight: 800; font-size: 34px; line-height: 40px; color: var(--f3-text-primary); }
.web-h1      { font-family: var(--f3-font-brand); font-weight: 700; font-size: 28px; line-height: 34px; color: var(--f3-text-primary); }
.web-h2      { font-family: var(--f3-font-brand); font-weight: 700; font-size: 24px; line-height: 30px; color: var(--f3-text-primary); }
.web-h3      { font-family: var(--f3-font-brand); font-weight: 600; font-size: 18px; line-height: 24px; color: var(--f3-text-primary); }
.web-lead    { font-family: var(--f3-font-brand); font-weight: 400; font-size: 17px; line-height: 26px; color: var(--f3-text-secondary); }
.web-body    { font-family: var(--f3-font-interface); font-weight: 400; font-size: 16px; line-height: 27px; color: var(--f3-text-secondary); max-width: 70ch; }
.web-small   { font-family: var(--f3-font-interface); font-weight: 400; font-size: 13px; line-height: 20px; color: var(--f3-text-muted); }
.web-label   { font-family: var(--f3-font-interface); font-weight: 600; font-size: 13px; line-height: 18px; color: var(--f3-text-secondary); }
.web-button  { font-family: var(--f3-font-interface); font-weight: 600; font-size: 15px; line-height: 20px; }
.web-eyebrow { font-family: var(--f3-font-brand); font-weight: 700; font-size: 12px; line-height: 16px; color: var(--f3-accent-text); text-transform: none; letter-spacing: 0; }

/* Vertical rhythm between stacked type-scale text: the reset above zeroes
   every heading/paragraph margin, so an eyebrow, heading and lead/body
   otherwise sit flush against each other with no gap at all. */
.web-eyebrow + .web-display,
.web-eyebrow + .web-h1,
.web-eyebrow + .web-h2,
.web-eyebrow + .web-h3 { margin-top: var(--f3-space-3); }
.web-display + .web-lead,
.web-display + .web-body,
.web-h1 + .web-lead,
.web-h1 + .web-body,
.web-h2 + .web-lead,
.web-h2 + .web-body,
.web-h3 + .web-lead,
.web-h3 + .web-body { margin-top: var(--f3-space-3); }

@media (min-width: 768px) {
  .web-display { font-size: 56px; line-height: 62px; }
  .web-h1      { font-size: 40px; line-height: 48px; }
  .web-h2      { font-size: 30px; line-height: 38px; }
  .web-h3      { font-size: 20px; line-height: 28px; }
  .web-lead    { font-size: 18px; line-height: 30px; }
  .web-body    { font-size: 16px; line-height: 27px; }
  .web-small   { font-size: 13px; line-height: 20px; }
  .web-label   { font-size: 13px; line-height: 18px; }
  .web-button  { font-size: 15px; line-height: 20px; }
  .web-eyebrow { font-size: 12px; line-height: 16px; }
}

/* type scale: application-token classes, used by the dashboard */
.app-title    { font-family: var(--f3-font-interface); font-weight: 600; font-size: 15px; line-height: 22px; color: var(--f3-text-primary); }
.app-section  { font-family: var(--f3-font-interface); font-weight: 600; font-size: 13px; line-height: 18px; color: var(--f3-text-primary); }
.app-label    { font-family: var(--f3-font-interface); font-weight: 600; font-size: 11px; line-height: 16px; color: var(--f3-text-secondary); letter-spacing: 0.3px; }
.app-body     { font-family: var(--f3-font-interface); font-weight: 400; font-size: 13px; line-height: 20px; color: var(--f3-text-primary); }
.app-control  { font-family: var(--f3-font-interface); font-weight: 500; font-size: 13px; line-height: 18px; }
.app-caption  { font-family: var(--f3-font-interface); font-weight: 400; font-size: 11px; line-height: 16px; color: var(--f3-text-muted); }
.app-numeric  { font-family: var(--f3-font-mono); font-weight: 500; font-size: 11px; line-height: 16px; color: var(--f3-text-secondary); }
.app-menu     { font-family: var(--f3-font-interface); font-weight: 400; font-size: 13px; line-height: 18px; color: var(--f3-text-secondary); }

/* ---- focus ring (design doc 7.9): single treatment everywhere, keyboard only ---- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--f3-focus-ring);
  outline-offset: 2px;
}

/* ---- reduced motion (design doc 5.1) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}