/* requires.management — base styles
   Mirrors nullpoint.nexus global.css reset and base exactly.
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; min-height: 100%; }

body {
  background:             var(--color-background);
  color:                  var(--color-text-primary);
  font-family:            var(--font-family-body);
  font-size:              var(--font-base);
  font-weight:            var(--font-weight-body);
  line-height:            1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition-theme), color var(--transition-theme);
}

h1, h2, h3, h4 {
  font-family:    var(--font-family-display);
  font-weight:    var(--font-weight-heading);
  color:          var(--color-text-primary);
  line-height:    1.2;
  letter-spacing: 0.03em;
}
h1 { font-size: var(--font-h1); }
h2 { font-size: var(--font-h2); }
h3 { font-size: var(--font-h3); }
h4 { font-size: var(--font-h4); }
p  { line-height: 1.6; }

code, pre, kbd, .mono {
  font-family: var(--font-family-mono);
  font-size:   calc(var(--font-base) + var(--font-mono-offset));
}

/* ── Scrollbar ── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--color-scrollbar-track); }
::-webkit-scrollbar-thumb  { background: var(--color-scrollbar-thumb); }

/* ── Selection ── */
::selection {
  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  color:      var(--color-text-primary);
}

/* ── Focus ── */
:focus-visible {
  outline:        1px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Utility classes — mirrors nullpoint global.css ── */
.text-large     { font-size: var(--font-large); }
.text-base      { font-size: var(--font-base); }
.text-small     { font-size: var(--font-small); }
.text-tiny      { font-size: var(--font-tiny); }
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-disabled  { color: var(--color-text-disabled); }
.text-accent    { color: var(--color-accent); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-danger    { color: var(--color-danger); }
.text-info      { color: var(--color-info); }
.font-display   { font-family: var(--font-family-display); }
.font-body      { font-family: var(--font-family-body); }
.font-mono      { font-family: var(--font-family-mono); }

.eyebrow {
  font-family:    var(--font-family-mono);
  font-size:      var(--font-tiny);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--color-accent);
  opacity:        0.8;
  display:        block;
  margin-bottom:  var(--space-2);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Shared primitives ── */
.page { min-height: 100vh; background: var(--color-background); color: var(--color-text-primary); }

.card {
  background: var(--color-surface-raised);
  border:     1px solid var(--color-border);
  padding:    var(--space-4) var(--space-5);
}

.divider { width: 100%; height: 1px; background: var(--color-divider); border: none; }

.notice {
  background:  color-mix(in srgb, var(--color-accent) 5%, transparent);
  border-left: 2px solid var(--color-accent);
  padding:     var(--space-3) var(--space-4);
  font-size:   var(--font-small);
  color:       var(--color-text-secondary);
  line-height: 1.5;
}
.notice--warning { background: color-mix(in srgb, var(--color-warning) 5%, transparent); border-left-color: var(--color-warning); color: var(--color-warning); }
.notice--danger  { background: color-mix(in srgb, var(--color-danger)  5%, transparent); border-left-color: var(--color-danger);  color: var(--color-danger); }
.notice--success { background: color-mix(in srgb, var(--color-success) 5%, transparent); border-left-color: var(--color-success); color: var(--color-success); }

/* Forms — mirrors nullpoint */
input, textarea, select {
  font-family: var(--font-family-body);
  font-size:   var(--font-base);
  color:       var(--color-text-primary);
  background:  var(--color-foreground);
  border:      1px solid var(--color-border);
  outline:     none;
  transition:  border-color var(--transition-fast);
}
input:focus, textarea:focus, select:focus { border-color: var(--color-accent); }
input::placeholder, textarea::placeholder { color: var(--color-text-disabled); font-style: italic; }

/* ── Loading state ── */
.loading-state {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      60vh;
}

.loader-text {
  font-family:    var(--font-family-mono);
  font-size:      var(--font-tiny);
  color:          var(--color-text-disabled);
  letter-spacing: 0.2em;
  animation:      loader-blink 1.2s step-end infinite;
}

/* ── Animations ── */
@keyframes loader-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse   {
  0%, 100% { opacity: 1;   text-shadow: 0 0 8px var(--color-accent); }
  50%      { opacity: 0.5; text-shadow: none; }
}
@keyframes hero-glyph-drift {
  0%, 100% { transform: translateY(-50%) rotate(0deg);  opacity: 0.6; }
  50%      { transform: translateY(-52%) rotate(3deg);  opacity: 0.3; }
}
@keyframes cta-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.reveal {
  opacity:    0;
  transform:  translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }