/* =============================================================
   MAH TRAINEE TOKENS — IKEA-Inspired Clean Blue/Yellow
   MAH Design System v1.0 | 2026-03-27
   CRITICAL: Yellow (#FFDB00) bg NEVER uses white text (1.1:1 fails)
             Yellow bg ALWAYS uses #1A1200 (16.2:1 AAA)
   ============================================================= */

/* ── Google Fonts ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+TC:wght@300;400;500;700&display=swap');

/* ═══════════════════════════════════════════════════════════
   LAYER 1: Primitive Tokens (Raw Values)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Blue Palette ────────────────────────────────────────── */
  --mt-blue-50:  #EBF3FC;
  --mt-blue-100: #C8D8EF;   /* Hover / subtle tint */
  --mt-blue-200: #96B8DF;
  --mt-blue-300: #5A8EC7;
  --mt-blue-400: #2970B5;
  --mt-blue-500: #0058A3;   /* Brand blue — on white = 7.2:1 AAA */
  --mt-blue-600: #004A8C;   /* Hover */
  --mt-blue-700: #003F7A;   /* Active / on-yellow text = 9.8:1 AAA */
  --mt-blue-800: #002D5E;
  --mt-blue-900: #001C40;

  /* ── Yellow Palette ─────────────────────────────────────── */
  --mt-yellow-50:  #FFFDE6;
  --mt-yellow-100: #FFF9BF;
  --mt-yellow-200: #FFF280;
  --mt-yellow-300: #FFDB00;  /* Brand yellow — DECORATION/BG only with dark text */
  --mt-yellow-400: #E6C400;  /* Hover state for yellow buttons */
  --mt-yellow-500: #BFA000;  /* on white = 4.7:1 AA */
  --mt-yellow-600: #9A8200;  /* Deeper for borders */

  /* ── Neutral Palette ────────────────────────────────────── */
  --mt-neutral-0:   #FFFFFF;
  --mt-neutral-50:  #F5F7FA;   /* Page background */
  --mt-neutral-100: #EBEEF3;
  --mt-neutral-200: #D0D9E6;   /* Dividers */
  --mt-neutral-300: #A8B5C8;
  --mt-neutral-400: #7B8FA8;
  --mt-neutral-500: #556680;
  --mt-neutral-600: #3E5066;
  --mt-neutral-700: #374151;   /* Secondary text = 10.3:1 AAA */
  --mt-neutral-800: #1F2937;
  --mt-neutral-900: #111827;   /* Primary text = 19.6:1 AAA */
  --mt-neutral-950: #060914;
}

/* ═══════════════════════════════════════════════════════════
   LAYER 2: Semantic Tokens (Functional Meaning)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Background ─────────────────────────────────────────── */
  --mt-bg-page:    var(--mt-neutral-50);    /* #F5F7FA — main background */
  --mt-bg-card:    var(--mt-neutral-0);     /* #FFFFFF — cards */
  --mt-bg-section: var(--mt-blue-50);       /* #EBF3FC — blue section tint */
  --mt-bg-yellow:  var(--mt-yellow-300);    /* #FFDB00 — yellow highlight areas */
  --mt-bg-hover:   var(--mt-blue-100);      /* #C8D8EF — hover state */

  /* ── Text ───────────────────────────────────────────────── */
  --mt-text-heading:    var(--mt-neutral-900);    /* #111827 — 19.6:1 AAA */
  --mt-text-body:       var(--mt-neutral-900);    /* #111827 — default body */
  --mt-text-secondary:  var(--mt-neutral-700);    /* #374151 — 10.3:1 AAA */
  /* P0 FIX: #556680 on --mt-bg-section (#EBF3FC) = 3.8:1 (fails AA).
     Use --mt-neutral-600 (#3E5066) = 4.8:1 AA on section bg and 7.1:1 AAA on white. */
  --mt-text-caption:    var(--mt-neutral-600);    /* #3E5066 — 4.8:1 AA on #EBF3FC, 7.1:1 AAA on white */
  --mt-text-placeholder:var(--mt-neutral-400);    /* #7B8FA8 */
  --mt-text-disabled:   var(--mt-neutral-300);    /* #A8B5C8 */

  /* ── Text on Colored Backgrounds ───────────────────────── */
  --mt-text-on-blue:   #FFFFFF;             /* white on #0058A3 = 7.2:1 AAA */
  --mt-text-on-yellow: #1A1200;             /* dark brown on #FFDB00 = 16.2:1 AAA */
  --mt-text-on-yellow-alt: var(--mt-blue-700); /* blue on yellow = 9.8:1 AAA */

  /* ── Brand / Interactive ────────────────────────────────── */
  --mt-color-primary:       var(--mt-blue-500);    /* #0058A3 — main CTA */
  --mt-color-primary-hover: var(--mt-blue-600);    /* #004A8C */
  --mt-color-primary-active:var(--mt-blue-700);    /* #003F7A */
  --mt-color-secondary:     var(--mt-yellow-300);  /* #FFDB00 — accent CTA */
  --mt-color-secondary-hover:var(--mt-yellow-400); /* #E6C400 */

  /* ── Border ─────────────────────────────────────────────── */
  --mt-border-light:   var(--mt-neutral-200);   /* #D0D9E6 */
  --mt-border-default: var(--mt-neutral-300);   /* #A8B5C8 */
  --mt-border-strong:  var(--mt-neutral-700);   /* #374151 */
  --mt-border-blue:    var(--mt-blue-500);      /* #0058A3 */
  --mt-border-yellow:  var(--mt-yellow-400);    /* #E6C400 */

  /* ── Focus ──────────────────────────────────────────────── */
  --color-focus-ring: var(--mt-blue-500);   /* #0058A3 */
  --color-bg:         var(--mt-bg-card);

  /* ── Shadow (Clean, neutral) ────────────────────────────── */
  --mt-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --mt-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
  --mt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --mt-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --mt-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════
   LAYER 3: Component Tokens
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Typography ─────────────────────────────────────────── */
  --mt-font-display: 'Inter', 'Noto Sans TC', system-ui, sans-serif;
  --mt-font-body:    'Inter', 'Noto Sans TC', system-ui, sans-serif;

  --mt-font-xs:    11px;
  --mt-font-sm:    13px;
  --mt-font-base:  15px;
  --mt-font-lg:    17px;
  --mt-font-xl:    20px;
  --mt-font-2xl:   24px;
  --mt-font-3xl:   30px;
  --mt-font-4xl:   36px;
  --mt-font-5xl:   48px;

  --mt-weight-regular:  400;
  --mt-weight-medium:   500;
  --mt-weight-semibold: 600;
  --mt-weight-bold:     700;
  --mt-weight-extrabold:800;

  --mt-leading-tight:   1.2;
  --mt-leading-snug:    1.4;
  --mt-leading-normal:  1.6;
  --mt-leading-relaxed: 1.75;
  --mt-leading-cjk:     1.8;

  --mt-tracking-tight:  -0.02em;
  --mt-tracking-normal:  0;
  --mt-tracking-wide:    0.02em;

  /* ── Spacing (Strict 8px Grid — IKEA precision) ─────────── */
  --mt-space-0:   0;
  --mt-space-1:   4px;    /* 0.5 unit */
  --mt-space-2:   8px;    /* 1 unit — base */
  --mt-space-3:  12px;    /* 1.5 unit */
  --mt-space-4:  16px;    /* 2 unit — standard padding */
  --mt-space-5:  20px;
  --mt-space-6:  24px;    /* 3 unit — component gap */
  --mt-space-8:  32px;    /* 4 unit — card gap */
  --mt-space-10: 40px;
  --mt-space-12: 48px;    /* 6 unit — section padding */
  --mt-space-16: 64px;    /* 8 unit — section gap */
  --mt-space-20: 80px;
  --mt-space-24: 96px;    /* 12 unit — hero section */

  /* ── Border Radius (IKEA: squarish but friendly) ────────── */
  --mt-radius-none:  0;
  --mt-radius-sm:    4px;
  --mt-radius-md:    8px;
  --mt-radius-lg:   12px;
  --mt-radius-xl:   16px;
  --mt-radius-full: 9999px;

  /* ── Button Component Tokens ────────────────────────────── */
  --mt-btn-padding-y:    12px;
  --mt-btn-padding-x:    24px;
  --mt-btn-radius:       var(--mt-radius-md);
  --mt-btn-font-size:    var(--mt-font-base);
  --mt-btn-font-weight:  var(--mt-weight-bold);
  --mt-btn-min-height:   44px;
  --mt-btn-transition:   background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;

  /* ── Card Component Tokens ──────────────────────────────── */
  --mt-card-padding:    var(--mt-space-6);
  --mt-card-radius:     var(--mt-radius-lg);
  --mt-card-shadow:     var(--mt-shadow-sm);
  --mt-card-bg:         var(--mt-bg-card);
  --mt-card-border:     1px solid var(--mt-border-light);

  /* ── Input Component Tokens ─────────────────────────────── */
  --mt-input-padding-y:    12px;
  --mt-input-padding-x:    16px;
  --mt-input-radius:       var(--mt-radius-md);
  --mt-input-border:       1.5px solid var(--mt-border-default);
  --mt-input-border-focus: 1.5px solid var(--mt-color-primary);
  --mt-input-min-height:   44px;

  /* ── Transitions ────────────────────────────────────────── */
  --mt-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --mt-duration-fast:  100ms;
  --mt-duration-base:  180ms;
  --mt-duration-slow:  300ms;
}

/* ── Apply to .theme-mah-trainee ────────────────────────────── */
.theme-mah-trainee {
  font-family:      var(--mt-font-body);
  background-color: var(--mt-bg-page);
  color:            var(--mt-text-body);
  --color-focus-ring: var(--mt-color-primary);
  --color-bg:         var(--mt-bg-card);
}