/* src/interview_platform/app/web/static/css/base.css */
@import url("/static/css/tokens.css");
@import url("/static/css/components.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Material+Symbols+Outlined&display=swap");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
.pageframe { max-width: 720px; margin: 0 auto; padding: var(--space-lg) var(--space-sm); }
.site-header {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid rgba(35, 32, 32, 0.08);
}
.site-header .brand { font-weight: 700; letter-spacing: -0.01em; color: var(--color-royal); }
.site-footer {
  padding: var(--space-md); margin-top: var(--space-xl);
  color: rgba(35, 32, 32, 0.62); font-size: var(--text-label);
  border-top: 1px solid rgba(35, 32, 32, 0.08);
}
h1 { font-size: var(--text-h1); font-weight: 300; line-height: 1.1; margin: 0 0 var(--space-sm); }
h1 strong { font-weight: 700; }
h2 { font-size: var(--text-h2); font-weight: 700; margin: 0 0 var(--space-sm); }
.material-symbols-outlined { font-family: "Material Symbols Outlined"; font-variation-settings: "wght" 400; vertical-align: middle; }