/* =========================================================================
   Metronic Design System — Colors & Type Tokens
   Extracted from the Metronic.fig source; values match the Figma swatches.
   ========================================================================= */

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

:root {
  /* ===== Color — Neutrals (light surfaces) ===== */
  --m-white:           rgb(255, 255, 255);
  --m-bg:              rgb(255, 255, 255);          /* page background */
  --m-bg-muted:        rgb(249, 249, 249);          /* card hover, table head */
  --m-bg-light:        rgb(252, 252, 252);
  --m-bg-coolgrey:     rgb(245, 245, 245);
  --m-fill-1:          rgb(244, 244, 244);          /* most-used neutral fill */
  --m-fill-2:          rgb(241, 241, 244);          /* chip / pill fill */
  --m-fill-3:          rgb(238, 238, 238);          /* divider, hairline */
  --m-fill-4:          rgb(233, 233, 233);
  --m-border:          rgb(221, 221, 221);          /* default 1-px stroke */
  --m-border-soft:     rgb(220, 221, 222);
  --m-border-cool:     rgb(219, 223, 233);

  /* ===== Color — Neutrals (dark surfaces) ===== */
  --m-ink:             rgb(7, 20, 55);              /* deepest body ink */
  --m-ink-1:           rgb(10, 10, 13);             /* dark-mode bg primary */
  --m-ink-2:           rgb(17, 18, 23);
  --m-ink-3:           rgb(22, 21, 30);             /* sidebar / topbar bg */
  --m-ink-4:           rgb(27, 28, 34);             /* dark surface */
  --m-ink-5:           rgb(28, 29, 34);             /* dark mode surface */
  --m-ink-6:           rgb(37, 37, 42);
  --m-ink-7:           rgb(38, 39, 47);
  --m-ink-8:           rgb(44, 45, 48);             /* heading on light */
  --m-ink-9:           rgb(50, 53, 68);

  /* ===== Color — Text scale (cool palette used across product) ===== */
  --m-text-900:        rgb(7, 20, 55);              /* h1 / kpi */
  --m-text-800:        rgb(24, 28, 50);             /* breadcrumb active */
  --m-text-700:        rgb(37, 47, 74);             /* h2, table head */
  --m-text-600:        rgb(57, 59, 64);             /* dark surface text */
  --m-text-500:        rgb(75, 86, 117);            /* body */
  --m-text-400:        rgb(103, 106, 114);          /* secondary label */
  --m-text-350:        rgb(120, 130, 157);          /* muted body */
  --m-text-300:        rgb(128, 130, 144);          /* tertiary */
  --m-text-250:        rgb(142, 145, 152);
  --m-text-200:        rgb(153, 161, 183);          /* hint / placeholder */
  --m-text-180:        rgb(154, 156, 174);
  --m-text-150:        rgb(181, 183, 200);          /* disabled */

  /* ===== Color — Brand & semantic ===== */
  --m-primary:         rgb(19, 121, 240);           /* brand primary blue */
  --m-primary-2:       rgb(27, 132, 255);           /* link blue */
  --m-primary-3:       rgb(40, 99, 214);            /* deep brand blue */
  --m-primary-soft:    rgba(19, 121, 240, 0.10);
  --m-success:         rgb(25, 199, 129);           /* logo green */
  --m-success-soft:    rgba(25, 199, 129, 0.10);
  --m-warning:         rgb(255, 168, 0);
  --m-warning-soft:    rgba(255, 168, 0, 0.12);
  --m-danger:          rgb(248, 40, 90);            /* notification red */
  --m-danger-soft:     rgba(248, 40, 90, 0.10);
  --m-info:            rgb(151, 71, 255);           /* highlight purple */
  --m-info-2:          rgb(177, 162, 255);          /* dashed callout */

  /* Categorical accents seen in charts / illustrations */
  --m-accent-coral:    rgb(76, 49, 51);
  --m-accent-pink:     rgb(255, 105, 145);
  --m-accent-orange:   rgb(255, 134, 63);

  /* ===== Color — Shadows & overlays ===== */
  --m-shadow-xs:       0 1px 2px 0 rgba(0,0,0,0.03);
  --m-shadow-sm:       0 3px 4px 0 rgba(0,0,0,0.03);                 /* card, default */
  --m-shadow-md:       0 4px 12px 0 rgba(0,0,0,0.07);                /* button hover */
  --m-shadow-card:     0 10px 14px 0 rgba(15,42,81,0.03);            /* widget */
  --m-shadow-popover:  0 8px 24px 0 rgba(7,20,55,0.10);              /* menu, dropdown */
  --m-overlay-scrim:   rgba(40, 99, 214, 0.85);                      /* hero overlay */

  /* ===== Radii ===== */
  --m-radius-1:        4px;
  --m-radius-2:        6px;     /* tag, pill */
  --m-radius-3:        8px;     /* button, input */
  --m-radius-4:        9px;
  --m-radius-5:        10px;
  --m-radius-6:        12px;    /* card, dialog */
  --m-radius-7:        20px;    /* component frame */
  --m-radius-pill:     999px;

  /* ===== Spacing (4-px base, 8-px rhythm) ===== */
  --m-space-1:         4px;
  --m-space-2:         8px;
  --m-space-3:         10px;
  --m-space-4:         12px;
  --m-space-5:         16px;
  --m-space-6:         20px;
  --m-space-7:         24px;
  --m-space-8:         30px;
  --m-space-9:         40px;
  --m-space-10:        60px;

  /* ===== Type — Family ===== */
  --m-font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --m-font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --m-font-display: "Inter", system-ui, sans-serif; /* hero/marquee */

  /* ===== Type — Size ramp (matches Figma usage) ===== */
  --m-fz-9:   9px;
  --m-fz-11:  11px;
  --m-fz-12:  12px;
  --m-fz-13:  13px;   /* default body — most-used */
  --m-fz-14:  14px;   /* primary body */
  --m-fz-15:  15px;
  --m-fz-16:  16px;   /* widget heading */
  --m-fz-17:  17px;
  --m-fz-18:  18px;   /* dialog title */
  --m-fz-20:  20px;
  --m-fz-22:  22px;   /* card heading */
  --m-fz-26:  26px;
  --m-fz-30:  30px;   /* KPI */
  --m-fz-34:  34px;
  --m-fz-38:  38px;
  --m-fz-40:  40px;
  --m-fz-48:  48px;   /* component header */

  /* ===== Type — Weight ===== */
  --m-fw-regular:    400;
  --m-fw-medium:     500;
  --m-fw-semibold:   600;
  --m-fw-bold:       700;

  /* ===== Type — Letter spacing ===== */
  --m-ls-tight:   -0.02em;   /* display */
  --m-ls-snug:    -0.01em;   /* labels, body 13/14 */
  --m-ls-normal:  0;

  /* ===== Type — Line height ===== */
  --m-lh-flat:    1.0;
  --m-lh-tight:   1.15;
  --m-lh-snug:    1.4;
  --m-lh-normal:  1.55;
  --m-lh-table:   22px;      /* fixed Figma value for table cells */
}

/* =========================================================================
   Semantic styles — drop-in classes that mirror Figma usage
   ========================================================================= */
html { font-family: var(--m-font-sans); color: var(--m-text-700); -webkit-font-smoothing: antialiased; }

.m-display {
  font: var(--m-fw-bold) var(--m-fz-48)/1 var(--m-font-sans);
  letter-spacing: var(--m-ls-tight);
  color: var(--m-white);
}
.m-h1 { font: var(--m-fw-bold) var(--m-fz-30)/1.1 var(--m-font-sans); letter-spacing: var(--m-ls-tight); color: var(--m-text-900); }
.m-h2 { font: var(--m-fw-bold) var(--m-fz-22)/1.15 var(--m-font-sans); color: var(--m-text-900); }
.m-h3 { font: var(--m-fw-bold) var(--m-fz-18)/1.2  var(--m-font-sans); color: var(--m-text-700); letter-spacing: var(--m-ls-snug); }
.m-h4 { font: var(--m-fw-bold) var(--m-fz-16)/1.25 var(--m-font-sans); color: var(--m-text-900); }
.m-h5 { font: var(--m-fw-bold) var(--m-fz-14)/1    var(--m-font-sans); color: var(--m-text-500); }
.m-eyebrow { font: var(--m-fw-medium) var(--m-fz-11)/1 var(--m-font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--m-text-200); }

.m-body    { font: var(--m-fw-medium)  var(--m-fz-13)/1.55 var(--m-font-sans); color: var(--m-text-500); letter-spacing: var(--m-ls-snug); }
.m-body-lg { font: var(--m-fw-medium)  var(--m-fz-14)/1.55 var(--m-font-sans); color: var(--m-text-500); letter-spacing: var(--m-ls-snug); }
.m-label   { font: var(--m-fw-semibold) var(--m-fz-13)/1   var(--m-font-sans); color: var(--m-text-700); }
.m-caption { font: var(--m-fw-medium)  var(--m-fz-12)/1.4  var(--m-font-sans); color: var(--m-text-200); }
.m-mono    { font: var(--m-fw-medium)  var(--m-fz-13)/1.4  var(--m-font-mono); color: var(--m-text-700); }
.m-link    { color: var(--m-primary-2); font-weight: var(--m-fw-bold); text-decoration: none; }
.m-link:hover { text-decoration: underline; }