/* ============================================================
   MakerSights — Colors & Type  (PLATFORM REBRAND)
   ------------------------------------------------------------
   Rebranded to the MakerSights Platform design system:
   • PP Telegraf everywhere (no serif, no hand fonts)
   • Brand Green #3a8518 as the single accent
   • Cool-gray neutrals, warm near-black ink, black nav
   • Warm "editorial" tones remapped to the platform Yellow family

   NOTE: the legacy --ms-* token *names* are preserved so the
   existing token-driven CSS keeps resolving — only the values
   were remapped onto platform tokens.
   ============================================================ */

/* -----------------------------------------------------------
   1. Fonts — PP Telegraf
   ----------------------------------------------------------- */
@font-face {
  font-family: "PPTelegraf";
  src: url("./fonts/PPTelegraf-Regular.woff2") format("woff2"),
       url("./fonts/PPTelegraf-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPTelegraf";
  src: url("./fonts/PPTelegraf-RegularSlanted.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PPTelegraf";
  src: url("./fonts/PPTelegraf-Semibold.woff2") format("woff2"),
       url("./fonts/PPTelegraf-Semibold.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPTelegraf";
  src: url("./fonts/PPTelegraf-Semibold.woff2") format("woff2"),
       url("./fonts/PPTelegraf-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPTelegraf";
  src: url("./fonts/PPTelegraf-Bold.woff2") format("woff2"),
       url("./fonts/PPTelegraf-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPTelegraf";
  src: url("./fonts/PPTelegraf-Black.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------
   2. Platform palette
   ----------------------------------------------------------- */
:root {
  /* ----- Platform base tokens (source of truth) ----- */
  --base-brand-green-1: #daebd1;
  --base-brand-green-2: #c8e2ba;
  --base-brand-green-3: #a5cf8e;
  --base-brand-green-4: #82bc62;
  --base-brand-green-main: #3a8518;
  --base-brand-green-5: #3d6b24;
  --base-brand-green-6: #395c27;
  --base-brand-green-7: #2d481f;
  --base-brand-green-8: #213516;

  --base-gray-1: #fafcfe;
  --base-gray-2: #eef2f6;
  --base-gray-3: #e5ebf1;
  --base-gray-4: #ced6de;
  --base-gray-5: #7e8da0;
  --base-gray-6: #636c79;
  --base-gray-main: #717f90;

  --base-black-main: #050301;
  --base-black-4: #373534;
  --base-white: #ffffff;
  --base-system-bg: #f6fafd;

  --base-red-1: #fce3e3;
  --base-red-main: #bf3826;
  --base-yellow-1: #fcf5e6;
  --base-yellow-2: #fce3b0;
  --base-yellow-3: #f7cf7c;
  --base-yellow-main: #d69d2b;
  --base-yellow-6: #735d32;
  --base-yellow-8: #453413;
  --base-blue-1: #e6f2ff;
  --base-blue-main: #216cbf;

  /* Chart palette (data-viz only) */
  --chart-green: #3a8518;
  --chart-yellow: #e7cb38;
  --chart-purple: #653bd9;
  --chart-red: #d63f2b;
  --chart-gray: #697687;

  /* ----- Legacy --ms-* names remapped onto platform values ----- */
  /* Dark neutrals */
  --ms-onyx:       #050301;   /* warm near-black — text + nav */
  --ms-thunder:    #373534;   /* secondary dark / panel */
  --ms-dune:       #2d481f;   /* dark olive — tonal green partner */
  --ms-white:      #FFFFFF;
  --ms-platinum:   #eef2f6;   /* cool light surface / stage */

  /* Accent — Brand Green */
  --ms-dusty-green: #3a8518;  /* the one true accent */
  --ms-green-2:     #82bc62;
  --ms-green-3:     #a5cf8e;
  --ms-green-4:     #c8e2ba;
  --ms-green-5:     #daebd1;  /* lightest green tint (bg) */
  --ms-lichen:      #82bc62;

  /* "Editorial warm" → platform Yellow family (warm secondary) */
  --ms-clay:        #d69d2b;  /* yellow-main */
  --ms-clay-light:  #f7cf7c;
  --ms-clay-tint:   #fce3b0;
  --ms-clay-deep:   #735d32;  /* deep yellow — secondary accent ink */
  --ms-sand:        #fcf5e6;  /* pale yellow bg */
  --ms-terracotta:  #f7cf7c;
  --ms-cocoa:       #453413;  /* deepest yellow-brown */

  /* Cool-gray ink scale */
  --ms-ink-1:       #050301;
  --ms-ink-2:       #373534;
  --ms-ink-3:       #636c79;
  --ms-ink-4:       #717f90;
  --ms-ink-5:       #7e8da0;
  --ms-ink-6:       #ced6de;
  --ms-ink-7:       #e5ebf1;
  --ms-ink-8:       #f6fafd;

  /* Semantic roles */
  --ms-bg:          var(--ms-white);
  --ms-bg-alt:      var(--ms-platinum);
  --ms-bg-editorial: var(--ms-clay);
  --ms-surface:     var(--ms-white);
  --ms-fg:          var(--ms-onyx);
  --ms-fg-muted:    var(--ms-ink-4);
  --ms-fg-subtle:   var(--ms-ink-5);
  --ms-border:      var(--ms-ink-7);
  --ms-border-strong: var(--base-gray-4);
  --ms-accent:      var(--ms-dusty-green);
  --ms-accent-fg:   var(--ms-onyx);

  /* Status */
  --ms-positive:    var(--base-brand-green-main);
  --ms-info:        var(--base-blue-main);
  --ms-warning:     var(--base-yellow-main);
  --ms-negative:    var(--base-red-main);

  /* -----------------------------------------------------------
     3. Type tokens — PP Telegraf everywhere
     ----------------------------------------------------------- */
  --ms-font-serif:   "PPTelegraf", system-ui, -apple-system, Segoe UI, sans-serif;
  --ms-font-sans:    "PPTelegraf", system-ui, -apple-system, Segoe UI, sans-serif;
  --ms-font-ui:      "PPTelegraf", system-ui, -apple-system, Segoe UI, sans-serif;
  --ms-font-mono:    "PPTelegraf", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --ms-text-xs:      12px;
  --ms-text-sm:      14px;
  --ms-text-base:    16px;
  --ms-text-md:      20px;
  --ms-text-lg:      24px;
  --ms-text-xl:      32px;
  --ms-text-2xl:     48px;
  --ms-text-3xl:     72px;
  --ms-text-4xl:     80px;
  --ms-text-5xl:     105px;
  --ms-text-6xl:     150px;

  /* Line-heights */
  --ms-leading-tight: 1.05;
  --ms-leading-snug:  1.18;
  --ms-leading-body:  1.45;
  --ms-leading-loose: 1.6;

  /* Letter-spacing — platform is near-zero, slightly positive on body */
  --ms-track-tight:   -0.01em;
  --ms-track-normal:   0em;
  --ms-track-body:     0.002em;
  --ms-track-ui:       0.01em;
  --ms-track-caps:     0.08em;

  /* Spacing scale */
  --ms-space-1:   4px;
  --ms-space-2:   8px;
  --ms-space-3:   12px;
  --ms-space-4:   16px;
  --ms-space-5:   24px;
  --ms-space-6:   32px;
  --ms-space-7:   48px;
  --ms-space-8:   64px;
  --ms-space-9:   96px;
  --ms-space-10:  128px;

  /* Radii — platform uses small corners (2/4/8/12/16) + pill */
  --ms-radius-0:  0px;
  --ms-radius-1:  2px;
  --ms-radius-2:  8px;
  --ms-radius-3:  12px;
  --ms-radius-4:  16px;
  --ms-radius-pill: 900px;

  /* Borders */
  --ms-border-1: 1px solid var(--ms-border);
  --ms-border-2: 1px solid var(--ms-clay);
  --ms-border-3: 2px solid var(--ms-dusty-green);

  /* Shadows — one floating recipe; cards rely on borders */
  --ms-shadow-0: none;
  --ms-shadow-1: 0 1px 2px rgba(4, 12, 21, 0.06);
  --ms-shadow-2: 0 8px 28px rgba(4, 12, 21, 0.08);
  --ms-shadow-3: 0 8px 28px rgba(4, 12, 21, 0.12);
}

/* -----------------------------------------------------------
   4. Semantic element styles
   ----------------------------------------------------------- */
html, body {
  background: var(--ms-bg);
  color: var(--ms-fg);
  font-family: var(--ms-font-sans);
  font-size: var(--ms-text-base);
  line-height: var(--ms-leading-body);
  letter-spacing: var(--ms-track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display headline — was serif, now PP Telegraf bold */
.ms-display,
h1.ms-display {
  font-family: var(--ms-font-serif);
  font-weight: 700;
  font-size: var(--ms-text-5xl);
  line-height: var(--ms-leading-tight);
  letter-spacing: var(--ms-track-tight);
  color: var(--ms-fg);
}

.ms-stat {
  font-family: var(--ms-font-sans);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 105px);
  line-height: var(--ms-leading-tight);
  letter-spacing: var(--ms-track-tight);
}

h1, .ms-h1 {
  font-family: var(--ms-font-ui);
  font-weight: 700;
  font-size: var(--ms-text-4xl);
  line-height: var(--ms-leading-tight);
  letter-spacing: var(--ms-track-tight);
  margin: 0;
}

h2, .ms-h2 {
  font-family: var(--ms-font-ui);
  font-weight: 700;
  font-size: var(--ms-text-xl);
  line-height: var(--ms-leading-snug);
  letter-spacing: var(--ms-track-tight);
  margin: 0;
}

h3, .ms-h3 {
  font-family: var(--ms-font-sans);
  font-weight: 700;
  font-size: var(--ms-text-lg);
  line-height: var(--ms-leading-snug);
  letter-spacing: var(--ms-track-normal);
  margin: 0;
}

h4, .ms-h4 {
  font-family: var(--ms-font-sans);
  font-weight: 600;
  font-size: var(--ms-text-md);
  line-height: var(--ms-leading-snug);
  letter-spacing: var(--ms-track-normal);
  margin: 0;
}

p, .ms-p {
  font-family: var(--ms-font-sans);
  font-weight: 400;
  font-size: var(--ms-text-base);
  line-height: var(--ms-leading-body);
  letter-spacing: var(--ms-track-body);
  color: var(--ms-fg);
  margin: 0 0 1em 0;
}

.ms-body-lg {
  font-family: var(--ms-font-sans);
  font-size: var(--ms-text-lg);
  line-height: 1.35;
  letter-spacing: var(--ms-track-ui);
  color: var(--ms-fg);
}

.ms-caption {
  font-family: var(--ms-font-sans);
  font-size: var(--ms-text-base);
  letter-spacing: var(--ms-track-ui);
  color: var(--ms-ink-2);
}

/* Eyebrow / kicker — ALLCAPS pre-heads (platform-correct) */
.ms-eyebrow {
  font-family: var(--ms-font-sans);
  font-weight: 600;
  font-size: var(--ms-text-sm);
  line-height: 1;
  letter-spacing: var(--ms-track-caps);
  text-transform: uppercase;
  color: var(--ms-fg-muted);
}

.ms-comment {
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-sm);
  color: var(--ms-ink-4);
  letter-spacing: var(--ms-track-body);
}

.ms-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  padding: 6px 12px;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-green-5);
  border: 1px solid var(--ms-dusty-green);
  font-family: var(--ms-font-sans);
  font-size: var(--ms-text-base);
  letter-spacing: var(--ms-track-ui);
  color: var(--ms-fg);
}

.ms-bullet::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ms-dusty-green);
  margin-right: var(--ms-space-3);
  vertical-align: 3px;
}

.ms-rule {
  display: block;
  height: 2px;
  width: 41px;
  background: var(--ms-dusty-green);
  margin: var(--ms-space-3) 0;
}

/* Brand arrow prefix — neutralized (no decorative hand arrows) */
.ms-arrow::before {
  content: "";
  margin: 0;
}

/* Client demo: the client wordmark stands where the MakerSights one did, in the
   top bar of every screen. A wordmark needs a shorter cap height than a symbol
   or a text lockup does to sit level with 14px UI type — at 15px this one is
   104px wide and shouts over the breadcrumb next to it. */
.brand-mark { height: 11px; width: auto; display: block; }