/* ══════════════════════════════════════════════════════════════════════
   MINTCRATE DESIGN TOKENS — Single Source of Truth
   ──────────────────────────────────────────────────────────────────────
   Loaded FIRST on every surface (public, sender, admin).
   Defines fonts, colors, radii, shadows, durations, easings.
   All other CSS files should consume these via var(--token-name).
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ──────────── FONTS ──────────── */
  --font-body: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-wordmark: 'Montserrat Alternates', 'Outfit', system-ui, sans-serif;
  --font-tech: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ──────────── BRAND COLORS ──────────── */
  --brand-blue: #2563EB;
  --brand-blue-hover: #1E40AF;
  --brand-blue-soft: #DBEAFE;

  /* Canonical aliases (back-compat) */
  --accent-blue: var(--brand-blue);
  --accent-hover: var(--brand-blue-hover);
  --primary-blue: var(--brand-blue);

  /* ──────────── SEMANTIC COLORS ──────────── */
  --success: #10B981;
  --success-soft: #D1FAE5;
  --warn:    #D97706;
  --warn-soft: #FEF3C7;
  --danger:  #DC2626;
  --danger-soft: #FEE2E2;
  --violet:  #8B5CF6;

  /* ──────────── SURFACES & TEXT ──────────── */
  --bg-paper:     #F8FAFC;
  --card-white:   #FFFFFF;
  --border-steel: #E2E8F0;
  --text-deep:    #0F172A;
  --text-slate:   #475569;
  --text-mute:    #64748B;

  /* Decorative */
  --blue-gradient: radial-gradient(circle at center, #F0F9FF 0%, #E0F2FE 100%);
  --hero-gradient: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);

  /* ──────────── REVAMP TOKENS (2026) ──────────── */
  --bg:            #FFFFFF;
  --bg-soft:       #FAFAF9;
  --line:          #E8EAED;
  --ink:           #0F172A;
  --ink-soft:      #475569;
  --ink-faint:     #64748B;  /* WCAG AA compliant on white (4.6:1) */
  --accent:        #2563EB;
  --accent-weak:   #EFF4FF;
  --shadow:        0 1px 2px rgb(15 23 42 / 0.04), 0 1px 1px rgb(15 23 42 / 0.03);
  --section-y:     80px;

  /* ──────────── RADIUS SCALE ──────────── */
  --r-xs:  6px;
  --r-sm:  8px;
  --r-md:  12px;   /* was 10px — updated for revamp card system */
  --r-lg:  16px;   /* was 12px — updated for revamp sections */
  --r-xl:  16px;
  --r-pill: 9999px;

  /* ──────────── SHADOW SCALE ──────────── */
  --shadow-card:      0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-card-hover:0 8px 25px rgb(0 0 0 / 0.06), 0 2px 6px rgb(0 0 0 / 0.04);
  --shadow-md:        0 2px 8px rgb(0 0 0 / 0.08);
  --shadow-lg:        0 8px 24px rgb(0 0 0 / 0.10);
  --shadow-cta:       0 8px 20px -6px rgba(37, 99, 235, 0.35);
  --shadow-blue:      0 4px 20px rgba(37, 99, 235, 0.25);

  /* ──────────── MOTION ──────────── */
  --dur-fast:   0.15s;
  --dur-base:   0.25s;
  --dur-slow:   0.4s;
  --dur-slower: 0.6s;

  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-soft:   cubic-bezier(0.2, 1, 0.2, 1);

  /* ──────────── LAYOUT ──────────── */
  --container-max: 1400px;
  --container-public: 72rem;
}

/* ──────────── BASE TYPOGRAPHY ──────────── */
body {
  font-family: var(--font-body);
}

.logo-text {
  font-family: var(--font-wordmark);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.tech-label {
  font-family: var(--font-tech);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

/* ──────────── REDUCED MOTION (global) ──────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ──────────── MOBILE SECTION SPACING ──────────── */
@media (max-width: 768px) {
  :root { --section-y: 56px; }
}