/* ============================================================
   ASTRIX TRADEWORX — general.css
   Design tokens · Reset · Base · Utilities
   ============================================================ */

/* ── Design Tokens ── */
:root {
  --color-primary:          #00346f;
  --color-primary-alt:      #004a99;
  --color-primary-light:    #3b82f6;
  --color-on-primary:       #ffffff;
  --color-primary-faint:    #eff4ff;

  --color-surface:          #f5f8ff;
  --color-surface-low:      #e8f0fb;
  --color-surface-card:     #ffffff;
  --color-surface-input:    #d4e4f7;
  --color-surface-dark:     #001a40;
  --color-surface-darkest:  #040b1a;

  --color-text:             #0a1530;
  --color-text-soft:        #2d4465;
  --color-text-muted:       #5a7a9b;
  --color-text-inv:         #ffffff;
  --color-text-inv-soft:    rgba(255,255,255,0.62);
  --color-text-inv-muted:   rgba(255,255,255,0.70);

  --color-gold:             #e6b84a;
  --color-gold-faint:       rgba(230,184,74,0.15);

  --color-ghost:            rgba(0, 52, 111, 0.12);

  --font: 'Manrope', system-ui, -apple-system, sans-serif;

  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-pill: 50px;

  --shadow-float: 0 8px 24px -4px rgba(10, 21, 48, 0.08);
  --shadow-lift:  0 16px 48px -8px rgba(10, 21, 48, 0.13);
  --shadow-nav:   0 2px 20px rgba(10, 21, 48, 0.09);

  --max-width: 1100px;
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Reset & Base ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; border: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-surface);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; background: none; }
ul { list-style: none; }
address { font-style: normal; }

/* ── Layout ── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Typography Utilities ── */
.section-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
  display: block;
}
.section-title {
  font-size: clamp(1.9rem, 3.8vw, 2.75rem);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.text-center { text-align: center; }

/* ── Entry Animations ── */
[data-animate] { opacity: 0; }
[data-animate="fade-up"] { transform: translateY(28px); }
[data-animate="fade-left"] { transform: translateX(36px); }
[data-animate].animated {
  opacity: 1; transform: none;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

/* ── Scroll Reveal ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* ── Dark Mode Token Overrides ── */
[data-theme="dark"] {
  --color-surface:         #0a1e3d;
  --color-surface-low:     #0d2448;
  --color-surface-card:    #0e2040;
  --color-surface-input:   #162e58;
  --color-text:            #e4effe;
  --color-text-soft:       #8baed4;
  --color-text-muted:      #6889aa;
  --color-ghost:           rgba(59,130,246,0.1);
  --color-primary-faint:   rgba(59,130,246,0.1);
  --shadow-float:          0 8px 24px -4px rgba(0,0,0,0.35);
  --shadow-lift:           0 16px 48px -8px rgba(0,0,0,0.5);
  --shadow-nav:            0 2px 20px rgba(0,0,0,0.4);
}