/* ==========================================================
   MoreTech BMP360 — DESIGN TOKENS
   Layer: 0 (Foundation)
   Version: 2.0.0
   ──────────────────────────────────────────────────────────
   PURPOSE:
   Single source of truth for ALL visual values.
   Swap THIS FILE to change the entire theme.
   No module should hardcode colors, shadows, or radii.
   ──────────────────────────────────────────────────────────
   THEME SWITCHING:
   1. Duplicate this file → 00-tokens-dark.css
   2. Override :root values
   3. Load alternate file instead
   ========================================================== */


/* ==========================================================
   §1  BRAND PALETTE
   ========================================================== */
:root {

  /* ── Primary ── */
  --mt-brand-primary:        #1e6be3;
  --mt-brand-primary-hover:  #1559c9;
  --mt-brand-primary-active: #0f4aad;
  --mt-brand-primary-soft:   #eef4ff;
  --mt-brand-primary-rgb:    30, 107, 227;

  /* Bridge for legacy modules / Bootstrap overrides */
  --primary:     var(--mt-brand-primary);
  --primary-rgb: var(--mt-brand-primary-rgb);

  /* ── Accent (secondary emphasis) ── */
  --mt-accent:             #38bdf8;
  --mt-accent-hover:       #0ea5e9;
  --mt-accent-soft:        #f0f9ff;

  /* ── Success / Warning / Danger ── */
  --mt-success:            #22c55e;
  --mt-success-soft:       #f0fdf4;
  --mt-warning:            #f59e0b;
  --mt-warning-soft:       #fffbeb;
  --mt-danger:             #ef4444;
  --mt-danger-soft:        #fef2f2;
}


/* ==========================================================
   §2  NEUTRAL SCALE
   ========================================================== */
:root {
  --mt-neutral-950:  #020617;
  --mt-neutral-900:  #0f172a;
  --mt-neutral-800:  #1e293b;
  --mt-neutral-700:  #334155;
  --mt-neutral-600:  #475569;
  --mt-neutral-500:  #64748b;
  --mt-neutral-400:  #94a3b8;
  --mt-neutral-300:  #cbd5e1;
  --mt-neutral-200:  #e2e8f0;
  --mt-neutral-100:  #f1f5f9;
  --mt-neutral-50:   #f8fafc;
  --mt-neutral-0:    #ffffff;
}


/* ==========================================================
   §3  SEMANTIC TEXT
   ========================================================== */
:root {
  --mt-text-heading:   var(--mt-neutral-900);
  --mt-text-body:      var(--mt-neutral-700);
  --mt-text-muted:     var(--mt-neutral-500);
  --mt-text-subtle:    var(--mt-neutral-400);
  --mt-text-inverse:   var(--mt-neutral-0);

  /* Legacy aliases (safe to use) */
  --mt-text-dark:      var(--mt-text-heading);
  --mt-text-light:     var(--mt-text-inverse);
}


/* ==========================================================
   §4  SURFACES
   ========================================================== */
:root {
  --mt-surface-page:     var(--mt-neutral-0);
  --mt-surface-raised:   var(--mt-neutral-0);
  --mt-surface-sunken:   var(--mt-neutral-50);
  --mt-surface-subtle:   var(--mt-neutral-100);
  --mt-surface-dark:     var(--mt-neutral-950);
  --mt-surface-dark-alt: var(--mt-neutral-900);

  /* Header-specific */
  --mt-surface-header:   var(--mt-neutral-0);
  --mt-surface-utility:  linear-gradient(90deg, #1e6be3, #2f7df0);
  --mt-surface-dropdown: var(--mt-neutral-0);

  /* Legacy aliases */
  --mt-surface-light:    var(--mt-surface-page);
  --mt-surface-soft:     var(--mt-surface-sunken);
}


/* ==========================================================
   §5  BORDERS
   ========================================================== */
:root {
  --mt-border-light:   var(--mt-neutral-200);
  --mt-border-default: var(--mt-neutral-200);
  --mt-border-strong:  var(--mt-neutral-300);
  --mt-border-focus:   rgba(30, 107, 227, 0.4);

  /* Legacy alias */
  --mt-border-color:   var(--mt-border-default);
}


/* ==========================================================
   §6  SHADOWS
   ========================================================== */
:root {
  --mt-shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.05);
  --mt-shadow-sm:     0 2px 6px rgba(0, 0, 0, 0.06);
  --mt-shadow-md:     0 4px 14px rgba(0, 0, 0, 0.08);
  --mt-shadow-lg:     0 12px 30px rgba(0, 0, 0, 0.10);
  --mt-shadow-xl:     0 20px 50px rgba(0, 0, 0, 0.12);
  --mt-shadow-2xl:    0 30px 70px rgba(0, 0, 0, 0.14);
  --mt-shadow-inner:  inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* Card-specific (reusable) */
  --mt-shadow-card:       0 4px 16px rgba(0, 0, 0, 0.06);
  --mt-shadow-card-hover: 0 20px 50px rgba(0, 0, 0, 0.12);

  /* Legacy aliases */
  --mt-shadow-soft:    var(--mt-shadow-md);
  --mt-shadow-strong:  var(--mt-shadow-lg);
}


/* ==========================================================
   §7  BORDER RADIUS
   ========================================================== */
:root {
  --mt-radius-xs:    4px;
  --mt-radius-sm:    6px;
  --mt-radius-md:    10px;
  --mt-radius-lg:    16px;
  --mt-radius-xl:    20px;
  --mt-radius-2xl:   24px;
  --mt-radius-full:  999px;
}


/* ==========================================================
   §8  SPACING SCALE (8px base)
   ========================================================== */
:root {
  --mt-space-1:   4px;
  --mt-space-2:   8px;
  --mt-space-3:   12px;
  --mt-space-4:   16px;
  --mt-space-5:   20px;
  --mt-space-6:   24px;
  --mt-space-8:   32px;
  --mt-space-10:  40px;
  --mt-space-12:  48px;
  --mt-space-16:  64px;
  --mt-space-20:  80px;
  --mt-space-24:  96px;
  --mt-space-32:  128px;
}


/* ==========================================================
   §9  TYPOGRAPHY
   ========================================================== */
:root {
  /* Font families */
  --mt-font-sans:     'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mt-font-mono:     'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Font sizes (fluid scale) */
  --mt-text-xs:    0.72rem;   /* 11.5px */
  --mt-text-sm:    0.82rem;   /* 13px   */
  --mt-text-base:  1rem;      /* 16px   */
  --mt-text-md:    1.05rem;   /* 16.8px */
  --mt-text-lg:    1.2rem;    /* 19px   */
  --mt-text-xl:    1.45rem;   /* 23px   */
  --mt-text-2xl:   1.75rem;   /* 28px   */
  --mt-text-3xl:   2.2rem;    /* 35px   */
  --mt-text-4xl:   2.8rem;    /* 45px   */

  /* Font weights */
  --mt-weight-light:    300;
  --mt-weight-normal:   400;
  --mt-weight-medium:   500;
  --mt-weight-semibold: 600;
  --mt-weight-bold:     700;
  --mt-weight-black:    800;

  /* Line heights */
  --mt-leading-tight:   1.15;
  --mt-leading-snug:    1.3;
  --mt-leading-normal:  1.6;
  --mt-leading-relaxed: 1.75;

  /* Letter spacing */
  --mt-tracking-tight:  -0.02em;
  --mt-tracking-normal:  0;
  --mt-tracking-wide:    0.04em;
  --mt-tracking-wider:   0.12em;
  --mt-tracking-widest:  0.18em;
}


/* ==========================================================
   §10  MOTION / EASING
   ========================================================== */
:root {
  --mt-ease-default:  cubic-bezier(0.22, 1, 0.36, 1);
  --mt-ease-in:       cubic-bezier(0.55, 0, 1, 0.45);
  --mt-ease-out:      cubic-bezier(0, 0.55, 0.45, 1);
  --mt-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --mt-ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --mt-duration-fast:    0.15s;
  --mt-duration-normal:  0.25s;
  --mt-duration-slow:    0.4s;
  --mt-duration-slower:  0.6s;

  /* Legacy alias */
  --mt-ease: var(--mt-ease-default);
}


/* ==========================================================
   §11  Z-INDEX SCALE
   ========================================================== */
:root {
  --mt-z-base:      1;
  --mt-z-dropdown:  100;
  --mt-z-sticky:    200;
  --mt-z-header:    1000;
  --mt-z-overlay:   5000;
  --mt-z-modal:     9000;
  --mt-z-toast:     9500;
  --mt-z-loader:    9999;
}


/* ==========================================================
   §12  SECTION SPACING (Responsive)
   ========================================================== */
:root {
  --mt-section-py:     100px;
  --mt-section-py-sm:  64px;
  --mt-section-gap:    var(--mt-space-16);
}

@media (max-width: 991px) {
  :root {
    --mt-section-py:    80px;
    --mt-section-py-sm: 48px;
  }
}

@media (max-width: 767px) {
  :root {
    --mt-section-py:    64px;
    --mt-section-py-sm: 40px;
  }
}


/* ==========================================================
   §13  GRADIENTS (Reusable)
   ========================================================== */
:root {
  --mt-gradient-primary:   linear-gradient(135deg, #1e6be3, #2f7df0);
  --mt-gradient-dark:      linear-gradient(180deg, #0f172a, #020617);
  --mt-gradient-surface:   linear-gradient(180deg, #f8fafc, #ffffff);
  --mt-gradient-surface-r: linear-gradient(180deg, #ffffff, #f8fafc);
  --mt-gradient-glow:      radial-gradient(circle, rgba(30,107,227,0.10), transparent 70%);
}