/* ============================================================
   NURSERY-ONE — Design Tokens
   Overrides engineering-one (orange/industrial) tokens
   Palette: Dark Blue #1b3d6e · Yellow/Gold #f5c518 · White
   ──────────────────────────────────────────────────────────
   RULE: Must override using the SAME variable names that
   01-foundation.css and 02-layout.css expect. Do NOT
   invent new variable names — override the existing ones.
============================================================ */


/* =============================================================
   §1  BRAND — Override orange → dark blue + yellow
============================================================= */
:root {
    /* Primary: dark navy blue (replaces CVAC orange) */
    --mt-brand-primary:        #1b3d6e;
    --mt-brand-primary-hover:  #122c52;
    --mt-brand-primary-active: #0e2240;
    --mt-brand-primary-soft:   #e8eef8;
    --mt-brand-primary-rgb:    27, 61, 110;

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

    /* Accent: warm yellow/gold (replaces amber) */
    --mt-accent:             #f5c518;
    --mt-accent-hover:       #d4a800;
    --mt-accent-soft:        #fef9e0;

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


/* =============================================================
   §2  SURFACES — Override header/utility bar colors
============================================================= */
:root {
    --mt-surface-page:     #ffffff;
    --mt-surface-raised:   #ffffff;
    --mt-surface-sunken:   #f0f4fa;
    --mt-surface-subtle:   #e8eef8;
    --mt-surface-dark:     #0f1e33;
    --mt-surface-dark-alt: #0a1628;

    /* Utility bar: dark navy instead of orange gradient */
    --mt-surface-header:   #ffffff;
    --mt-surface-utility:  linear-gradient(90deg, #122c52, #1b3d6e);
    --mt-surface-dropdown: #ffffff;

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


/* =============================================================
   §3  BORDERS
============================================================= */
:root {
    --mt-border-light:   #dde4ef;
    --mt-border-default: #dde4ef;
    --mt-border-strong:  #c2d0e0;
    --mt-border-focus:   rgba(27, 61, 110, 0.4);

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


/* =============================================================
   §4  GRADIENTS
============================================================= */
:root {
    --mt-gradient-primary:   linear-gradient(135deg, #1b3d6e, #2a5298);
    --mt-gradient-dark:      linear-gradient(180deg, #0f1e33, #0a1628);
    --mt-gradient-surface:   linear-gradient(180deg, #f0f4fa, #ffffff);
    --mt-gradient-surface-r: linear-gradient(180deg, #ffffff, #f0f4fa);
    --mt-gradient-glow:      radial-gradient(circle, rgba(27,61,110,0.10), transparent 70%);
}


/* =============================================================
   §5  NURSERY-SPECIFIC ALIASES
   Used by nursery-sections.css — map to engineering variable names
============================================================= */
:root {
    /* Primary aliases */
    --mt-primary:        var(--mt-brand-primary);
    --mt-primary-dark:   var(--mt-brand-primary-hover);
    --mt-primary-light:  #2a5298;
    --mt-primary-soft:   var(--mt-brand-primary-soft);

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

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

    /* Text aliases */
    --mt-text-dark:      #0f1e33;
    --mt-text-medium:    #3d5068;

    /* Shadow aliases */
    --mt-shadow-accent:  0 8px 32px rgba(245, 197, 24, 0.25);

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


/* =============================================================
   §6  ALL OTHER TOKENS — INHERIT FROM ENGINEERING
   (neutral scale, spacing, typography, shadows, motion, z-index)
   These do NOT need to change for the nursery template.
   They are already defined in 00-tokens.css (engineering)
   which loads first on the shared CDN — but since we REPLACE
   that file with this one in the nursery template, we must
   re-declare them here to avoid missing variables.
============================================================= */

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

    /* Semantic text */
    --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);
}

/* 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 */
:root {
    --mt-font-sans:     'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --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;
    }
}