/* ============================================================
   MORETECH -- Design Tokens
   First-party WEB360 template built as a universal, AI-controllable
   design foundation for WEB360 Studio (not cloned from Fable5's visual
   identity -- only its technical token STRUCTURE was used as a
   starting point, per the real WEB360 clone-first procedure).
   Palette: deep ink navy (--mt-brand-primary) + warm terracotta accent
   (--mt-accent) -- deliberately distinct from Fable5's navy/gold and
   from Fable5's own template-local --fbl-accent (#2D9CFF), so a
   rendered page is never ambiguous about which template it belongs to.
   ------------------------------------------------------------
   RULE (unchanged from every WEB360 template): override using the SAME
   variable names 01-foundation.css / 02-layout.css expect. Do NOT
   invent new variable names -- override the existing ones. Every
   recurring visual value MoreTech's own CSS needs is expressed as a
   real --mt-* token here, on purpose -- MoreTech must never repeat
   Fable5's --fbl-* problem of a hidden, template-local value Studio's
   capability model cannot see.
============================================================ */


/* =============================================================
   SS1  BRAND
============================================================= */
:root {
    /* Primary: deep ink navy */
    --mt-brand-primary:        #14213D;
    --mt-brand-primary-hover:  #0D1628;
    --mt-brand-primary-active: #090F1C;
    --mt-brand-primary-soft:   #E9ECF3;
    --mt-brand-primary-rgb:    20, 33, 61;

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

    /* Accent: warm terracotta */
    --mt-accent:             #E85D2F;
    --mt-accent-hover:       #C94A22;
    --mt-accent-soft:        #FDECE4;

    /* Feedback -- keep standard */
    --mt-success:            #22c55e;
    --mt-success-soft:       #f0fdf4;
    --mt-warning:            #f59e0b;
    --mt-warning-soft:       #fffbeb;
    --mt-danger:             #ef4444;
    --mt-danger-soft:        #fef2f2;
}


/* =============================================================
   SS2  SURFACES
============================================================= */
:root {
    --mt-surface-page:     #ffffff;
    --mt-surface-raised:   #ffffff;
    --mt-surface-sunken:   #F4F5F8;
    --mt-surface-subtle:   #E9ECF3;
    --mt-surface-dark:     #10182B;
    --mt-surface-dark-alt: #0B1220;

    --mt-surface-header:   #ffffff;
    --mt-surface-utility:  linear-gradient(90deg, #0D1628, #14213D);
    --mt-surface-dropdown: #ffffff;

    /* Theme-aware surfaces (aliases on this light-foundation template --
       see MASTER_TEMPLATE_FABLE5.md SS1 "Option B": global --mt-* tokens
       stay light; a per-section/per-page dark identity, if ever wanted,
       is a deliberate additional layer, never a silent re-value here). */
    --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 */
    --mt-surface-light:    var(--mt-surface-page);
    --mt-surface-soft:     var(--mt-surface-sunken);
}


/* =============================================================
   SS3  BORDERS
============================================================= */
:root {
    --mt-border-light:   #E3E7EF;
    --mt-border-default: #E3E7EF;
    --mt-border-strong:  #C7CEDB;
    --mt-border-focus:   rgba(20, 33, 61, 0.4);

    --mt-border-color:   var(--mt-border-default);
}


/* =============================================================
   SS4  GRADIENTS
============================================================= */
:root {
    --mt-gradient-primary:   linear-gradient(135deg, #14213D, #2C4270);
    --mt-gradient-dark:      linear-gradient(180deg, #10182B, #0B1220);
    --mt-gradient-surface:   linear-gradient(180deg, #F4F5F8, #ffffff);
    --mt-gradient-surface-r: linear-gradient(180deg, #ffffff, #F4F5F8);
    --mt-gradient-glow:      radial-gradient(circle, rgba(232,93,47,0.12), transparent 70%);
}


/* =============================================================
   SS5  TEMPLATE-SPECIFIC ALIASES
============================================================= */
:root {
    /* Primary aliases */
    --mt-primary:        var(--mt-brand-primary);
    --mt-primary-dark:   var(--mt-brand-primary-hover);
    --mt-primary-light:  #2C4270;
    --mt-primary-soft:   var(--mt-brand-primary-soft);

    /* Accent aliases */
    --mt-accent-dark:    var(--mt-accent-hover);
    --mt-accent-light:   #F5A780;

    /* Background aliases */
    --mt-white:          #ffffff;
    --mt-off-white:      #FAFAFB;
    --mt-light-bg:       var(--mt-surface-sunken);
    --mt-border:         var(--mt-border-default);

    /* Text aliases */
    --mt-text-dark:      #10182B;
    --mt-text-medium:    #444C5E;

    /* Shadow aliases */
    --mt-shadow-accent:  0 8px 32px rgba(232, 93, 47, 0.22);

    /* Button radius alias */
    --mt-radius:         10px;
    --mt-radius-lg:      20px;
    --mt-radius-pill:    var(--mt-radius-full);
}


/* =============================================================
   SS6  ALL OTHER TOKENS -- unchanged, template-agnostic "engineering"
   scale (neutral, spacing, typography, shadows, motion, z-index).
   Kept identical to every other WEB360 template on purpose -- these
   are the shared scale Studio's own curated token controls (radius/
   weight/type-scale/spacing) already read directly, and there is no
   real design reason for a template to redefine them.
============================================================= */

/* 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;

    --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);
    --mt-text-light:     var(--mt-text-inverse);

    --mt-text-strong:    var(--mt-text-heading);
}

/* 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);
    --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);
    --mt-shadow-soft:    var(--mt-shadow-md);
    --mt-shadow-strong:  var(--mt-shadow-lg);
}

/* Border radius */
:root {
    --mt-radius-xs:   4px;
    --mt-radius-sm:   6px;
    --mt-radius-md:   10px;
    --mt-radius-xl:   20px;
    --mt-radius-2xl:  24px;
    --mt-radius-full: 999px;
}

/* Spacing */
: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;
}

/* Typography -- Inter (see head-css.php), one of Studio's already-
   curated brand fonts (app/design/tokens.py::CURATED_FONTS) */
:root {
    --mt-font-sans:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mt-font-body:     var(--mt-font-sans);
    --mt-font-mono:     'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --mt-text-xs:    0.72rem;
    --mt-text-sm:    0.82rem;
    --mt-text-base:  1rem;
    --mt-text-md:    1.05rem;
    --mt-text-lg:    1.2rem;
    --mt-text-xl:    1.45rem;
    --mt-text-2xl:   1.75rem;
    --mt-text-3xl:   2.2rem;
    --mt-text-4xl:   2.8rem;

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

    --mt-leading-tight:   1.15;
    --mt-leading-snug:    1.3;
    --mt-leading-normal:  1.6;
    --mt-leading-relaxed: 1.75;

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

/* Motion */
: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;
    --mt-ease: var(--mt-ease-default);
}

/* Z-index */
: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;
}

/* Section spacing */
: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;
    }
}