/* ==========================================================
   MORETECH TEMPLATE 1 — DESIGN TOKENS  (MoreTech Signature palette — Option C)
   Layer: 0 (Foundation)  —  template-local override
   ──────────────────────────────────────────────────────────
   PURPOSE:
   Template-local token set for the `moretech_template1` template. REPLACES
   the shared /web/assets/css/00-tokens.css for this template
   only (wired as Layer 0 in this template's head-css.php).

   RULE: re-declares EVERY token the shared CSS layer expects,
   using the SAME variable names — only the brand/accent/gradient
   VALUES differ (template-system.md §9, §16 step 2). Geometry,
   spacing, typography, motion, z-index and neutral scale are kept
   byte-identical to the shared file so layout/structure/components
   are unchanged — this is a colour rebrand only.

   PALETTE (Director-approved 2026-06-10):
     MoreTech Indigo  #3B4BD8  (primary · hover #3340BE · active #2A35A0)
     Signal Teal      #0EA5A4  (accent · hover #0B8584)
     Deep Slate Navy  #0F172A  (dark surface base)
     Depth tones      #0B1020 / #1B2340  (hero/CTA dark layering)
     Clean White      #ffffff / #f8fafc  (backgrounds)
     Signature        gradient #3B4BD8 → #0EA5A4
   TYPOGRAPHY: Poppins (headings) · Inter (body) — split via
     --mt-font-body + the body.tpl-moretech_template1 hook (§9b).
   ========================================================== */


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

  /* ── Primary (MoreTech Indigo) ── */
  --mt-brand-primary:        #3B4BD8;
  --mt-brand-primary-hover:  #3340BE;
  --mt-brand-primary-active: #2A35A0;
  --mt-brand-primary-soft:   #EEF0FC;
  --mt-brand-primary-rgb:    59, 75, 216;

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

  /* ── Accent (Signal Teal) ── */
  --mt-accent:             #0EA5A4;
  --mt-accent-hover:       #0B8584;
  --mt-accent-soft:        #E8F7F7;

  /* ── 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  (Dark Navy → Clean White — unchanged)
   ========================================================== */
: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  (unchanged)
   ========================================================== */
: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);

  /* Strong text — high-contrast text on the page surface. */
  --mt-text-strong:    var(--mt-text-heading);

  /* 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 — utility bar reads as a deep-indigo band */
  --mt-surface-header:   var(--mt-neutral-0);
  --mt-surface-utility:  linear-gradient(90deg, #2A35A0, #3B4BD8);
  --mt-surface-dropdown: var(--mt-neutral-0);

  /* Theme-aware surfaces (flat on this light template). */
  --mt-page-bg:               var(--mt-surface-page);
  --mt-surface-card:          var(--mt-surface-raised);
  --mt-surface-glass-bg:      transparent;
  --mt-surface-glass-border:  1px solid var(--mt-border-default);

  /* 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(59, 75, 216, 0.4);

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


/* ==========================================================
   §6  SHADOWS  (neutral — unchanged)
   ========================================================== */
: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  (geometry — unchanged)
   ========================================================== */
: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 — unchanged)
   ========================================================== */
: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  (MoreTech split: Poppins headings · Inter body)
   ──────────────────────────────────────────────────────────
   --mt-font-sans stays Poppins: every heading/title rule in the
   section CSS references it explicitly, and §9b re-asserts it on
   h1–h6 (headings inherit the body font in 01-foundation.css).
   --mt-font-body now carries Inter and is applied to the page
   via the platform identity hook (§9b) — no shared-CSS change.
   ========================================================== */
:root {
  --mt-font-sans:     'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mt-font-body:     'Inter', 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;
}

/* ──────────────────────────────────────────────────────────
   §9b  TYPOGRAPHY APPLICATION (template-local, identity-hook)
   The shared 01-foundation.css sets body { font-family:
   var(--mt-font-sans) } and h1–h6 inherit it. These two rules —
   scoped via the platform identity hook body.tpl-moretech_template1
   (claude-memory §40) — switch BODY text to Inter while keeping
   every heading on Poppins. Specificity (0,1,1)/(0,1,2) beats the
   foundation's element selectors regardless of load order. No
   shared CSS, markup, or renderer change.
   ────────────────────────────────────────────────────────── */
body.tpl-moretech_template1 {
  font-family: var(--mt-font-body);
}
body.tpl-moretech_template1 h1,
body.tpl-moretech_template1 h2,
body.tpl-moretech_template1 h3,
body.tpl-moretech_template1 h4,
body.tpl-moretech_template1 h5,
body.tpl-moretech_template1 h6 {
  font-family: var(--mt-font-sans);
}


/* ==========================================================
   §10  MOTION / EASING  (unchanged)
   ========================================================== */
: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  (unchanged)
   ========================================================== */
: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 — unchanged)
   ========================================================== */
: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) — MoreTech Signature
   ──────────────────────────────────────────────────────────
   - primary: the brand signature (indigo → teal). Used by accent
     bars, dividers, and filled identity elements.
   - dark: layered depth for hero/CTA surfaces using the approved
     supporting tones (#1B2340 → #0F172A → #0B1020) — deeper and
     warmer-indigo than the old flat navy fade.
   - glow: soft indigo ambience on dark surfaces.
   ========================================================== */
:root {
  --mt-gradient-primary:   linear-gradient(135deg, #3B4BD8, #0EA5A4);
  --mt-gradient-dark:      linear-gradient(180deg, #1B2340 0%, #0F172A 45%, #0B1020 100%);
  --mt-gradient-surface:   linear-gradient(180deg, #f8fafc, #ffffff);
  --mt-gradient-surface-r: linear-gradient(180deg, #ffffff, #f8fafc);
  --mt-gradient-glow:      radial-gradient(circle, rgba(59, 75, 216, 0.12), transparent 70%);
}