/* ============================================================
   BASE — CSS Variables + Reset + Typography
   NexRC Design System v3 — Premium Light Theme
   ============================================================ */

:root {
  /* ── Brand ───────────────────────────────────────────────── */
  --brand-primary:       #1a3a6e;
  --brand-primary-hover: #0f2a55;
  --brand-primary-muted: rgba(26, 58, 110, 0.07);
  --graphite:            #111827;
  --graphite-hover:      #1f2937;

  /* ── Surfaces ────────────────────────────────────────────── */
  --surface-0: #FFFFFF;
  --surface-1: #F8F9FA;
  --surface-2: #F1F3F5;
  --surface-dark:      #0A0A0A;
  --surface-dark-card: #141414;

  /* ── Status ──────────────────────────────────────────────── */
  --accent-green:    #059669;
  --accent-green-bg: rgba(5, 150, 105, 0.08);
  --accent-orange:   #D97706;
  --accent-orange-bg: rgba(217, 119, 6, 0.08);

  /* ── Text ────────────────────────────────────────────────── */
  --text-primary:   #0A0A0A;
  --text-secondary: #525252;
  --text-muted:     #9CA3AF;
  --text-inverted:  #FAFAFA;

  /* ── Borders ─────────────────────────────────────────────── */
  --border:        #E5E7EB;
  --border-strong: #D1D5DB;

  /* ── Typography ──────────────────────────────────────────── */
  --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-card:       0 0 0 1px var(--border);
  --shadow-card-hover: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-modal:      0 20px 60px rgba(0,0,0,0.16);

  /* ── Shapes ──────────────────────────────────────────────── */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-width:  1280px;
  --header-h:   60px;
  --bottom-nav-h: 56px;
  --section-py: 80px;

  /* ── Legacy aliases (keeps old templates working) ─────────── */
  --bg:           var(--surface-0);
  --bg-base:      var(--surface-0);
  --bg-surface:   var(--surface-1);
  --bg-elevated:  var(--surface-2);
  --bg-card:      var(--surface-0);
  --bg-secondary: var(--surface-1);
  --bg-dark:      var(--surface-dark);
  --bg-dark-card: var(--surface-dark-card);
  --accent:        var(--brand-primary);
  --accent-hover:  var(--brand-primary-hover);
  --accent-light:  var(--brand-primary-muted);
  --accent-subtle: var(--brand-primary-muted);
  --success:         var(--accent-green);
  --success-bg:      var(--accent-green-bg);
  --status-stock:    var(--accent-green);
  --status-stock-bg: var(--accent-green-bg);
  --warning:         var(--accent-orange);
  --warning-bg:      var(--accent-orange-bg);
  --status-order:    var(--accent-orange);
  --status-order-bg: var(--accent-orange-bg);
  --border-hover:   var(--border-strong);
  --border-light:   var(--surface-2);
  --shadow:         var(--shadow-card);
  --shadow-md:      var(--shadow-card-hover);
  --shadow-lg:      var(--shadow-modal);
  --shadow-hover:   var(--shadow-card-hover);
  --radius-xl: 16px;
  --font: var(--font-primary);
  --gap: 24px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-primary); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: var(--font-primary); }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* ── Typography scale ──────────────────────────────────────── */
.text-xs  { font-size: 11px; }
.text-sm  { font-size: 13px; }
.text-base{ font-size: 15px; }
.text-lg  { font-size: 17px; }
.text-xl  { font-size: 20px; }
.text-2xl { font-size: 24px; }
.text-3xl { font-size: 32px; }
.text-4xl { font-size: 40px; }
.text-5xl { font-size: 56px; }

.font-medium  { font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold    { font-weight: 700; }
.font-extrabold{ font-weight: 800; }
.font-mono    { font-family: var(--font-mono); }

.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-accent    { color: var(--brand-primary); }
.text-primary   { color: var(--text-primary); }
.text-on-dark   { color: var(--text-inverted); }
.text-success   { color: var(--accent-green); }
.text-warning   { color: var(--accent-orange); }

/* ── Container ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ── Sections ──────────────────────────────────────────────── */
.section         { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.section--sm     { padding-top: 48px; padding-bottom: 48px; }
.section--lg     { padding-top: 120px; padding-bottom: 120px; }
.section--gray   { background: var(--surface-1); }
.section--dark   { background: var(--surface-dark); }
.bg-secondary    { background: var(--surface-1); }
.bg-dark         { background: var(--surface-dark); }

.section-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 8px;
}
.section-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 0;
}
.section-title--dark { color: var(--text-inverted); }
.section-title--lg   { font-size: 36px; }
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}

/* ── Utility ────────────────────────────────────────────────── */
.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; }
.hidden   { display: none !important; }
.flex     { display: flex; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.gap-4    { gap: 4px; }
.gap-8    { gap: 8px; }
.gap-16   { gap: 16px; }

/* ── Focus visible ────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

@keyframes rfqShake {
  0%,100% { transform: translateX(0); }
  18%     { transform: translateX(-5px); }
  36%     { transform: translateX(5px); }
  54%     { transform: translateX(-4px); }
  72%     { transform: translateX(4px); }
  88%     { transform: translateX(-2px); }
}