/* ============================================================================
   MME 360 — Design Tokens (v3 unification, #45)
   ----------------------------------------------------------------------------
   This file used to define the M365/Fluent palette. It has been REWIRED so
   that every legacy variable name resolves to a v3 value. Existing templates
   that reference --m365-surface, --office-blue-500, etc. now silently render
   in the v3 palette (medical teal + Figtree/Noto Sans) without any template
   changes. New templates reference v3 vars directly from mme-v3.css.
============================================================================ */

@import url('mme-v3.css');

/* Body default — Figtree+Noto Sans replaces Segoe UI everywhere */
body {
  font-family: 'Noto Sans', 'Figtree', 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--v3-fg);
  background: var(--v3-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Figtree', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: var(--v3-fg);
}

:root {
  /* ===== Office / M365 palette aliases (legacy) — all point at v3 ===== */
  --office-blue-50:     var(--v3-surface-3);
  --office-blue-100:    var(--v3-surface-3);
  --office-blue-200:    var(--v3-border-strong);
  --office-blue-300:    #67E8F9;
  --office-blue-400:    #22D3EE;
  --office-blue-500:    var(--v3-primary);
  --office-blue-600:    var(--v3-primary-dark);
  --office-blue-700:    var(--v3-primary-darker);
  --office-blue-800:    var(--v3-primary-darker);
  --office-blue-900:    #134E4A;

  /* M365 surface scale */
  --m365-canvas:        var(--v3-bg);
  --m365-surface:       var(--v3-surface);
  --m365-surface-2:     var(--v3-surface-2);
  --m365-surface-3:     var(--v3-surface-3);
  --m365-divider:       var(--v3-border);
  --m365-app-bar-bg:    var(--v3-fg);
  --m365-app-bar-fg:    var(--v3-fg-inverse);
  --m365-app-bar-hover: rgba(255,255,255,0.10);

  /* Generic colour roles */
  --color-bg:           var(--v3-bg);
  --color-surface:      var(--v3-surface);
  --color-surface-2:    var(--v3-surface-2);
  --color-surface-3:    var(--v3-surface-3);
  --color-text-default: var(--v3-fg);
  --color-text-strong:  var(--v3-fg);
  --color-text-muted:   var(--v3-fg-muted);
  --color-text-subtle:  var(--v3-fg-subtle);
  --color-text-tertiary:var(--v3-fg-subtle);
  --color-text-inverse: var(--v3-fg-inverse);

  --color-success:      var(--v3-accent);
  --color-success-fg:   var(--v3-accent-dark);
  --color-success-bg:   #DCFCE7;
  --color-warning:      var(--v3-warn);
  --color-warning-fg:   #92400E;
  --color-warning-bg:   var(--v3-warn-bg);
  --color-danger:       var(--v3-danger);
  --color-danger-fg:    var(--v3-danger);
  --color-danger-bg:    var(--v3-danger-bg);

  --color-border:       var(--v3-border);
  --color-border-strong:var(--v3-border-strong);

  --surface-1:          var(--v3-surface-2);
  --surface-2:          var(--v3-surface-3);
  --surface-3:          var(--v3-muted);

  --mme-navy-50:        var(--v3-surface-3);
  --mme-navy-100:       var(--v3-border-strong);
  --mme-navy-500:       var(--v3-primary);
  --mme-navy-700:       var(--v3-primary-darker);
  --mme-navy-800:       var(--v3-fg);
  --mme-navy-900:       var(--v3-fg);
  --mme-teal-500:       var(--v3-primary);
  --mme-teal-700:       var(--v3-primary-darker);

  /* Typography aliases */
  --font-sans:          'Noto Sans', 'Figtree', 'Inter', system-ui, sans-serif;
  --font-display:       'Figtree', 'Inter', system-ui, sans-serif;
  --font-mono:          'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --text-xs:            12px;
  --text-sm:            14px;
  --text-base:          16px;
  --text-md:            16px;
  --text-lg:            18px;
  --text-xl:            20px;
  --text-2xl:           24px;
  --text-3xl:           32px;

  --font-regular:       400;
  --font-medium:        500;
  --font-semibold:      600;
  --font-bold:          700;

  --space-1:            4px;
  --space-2:            8px;
  --space-3:            12px;
  --space-4:            16px;
  --space-5:            20px;
  --space-6:            24px;
  --space-7:            28px;
  --space-8:            32px;
  --space-9:            36px;
  --space-10:           40px;
  --space-12:           48px;
  --space-16:           64px;

  --radius-sm:          var(--v3-r-sm);
  --radius-md:          var(--v3-r);
  --radius-lg:          var(--v3-r-md);
  --radius-xl:          var(--v3-r-lg);
  --radius-pill:        var(--v3-r-pill);

  --shadow-sm:          var(--v3-shadow-sm);
  --shadow:             var(--v3-shadow);
  --shadow-md:          var(--v3-shadow-md);
  --shadow-lg:          var(--v3-shadow-lg);
  --m365-shadow-2:      var(--v3-shadow);
  --m365-shadow-4:      var(--v3-shadow-md);
  --m365-shadow-8:      var(--v3-shadow-lg);
}