/* ==========================================================================
   MXM Design - Design Tokens
   Ported from the Cloudis reference (palette scale, radius, layout rhythm),
   with MXM's own indigo accent added.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fonts */
  --fonts-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fonts-heading: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fonts-badge: "Montserrat", "Regular", Consolas, monospace;

  /* Base colors */
  --color-black: #0a0a0a;
  --color-white: #ffffff;

  /* Neutral scale (from reference) */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f7f7f7;
  --color-neutral-200: #f2f2f2;
  --color-neutral-300: #ededed;
  --color-neutral-400: #e6e6e6;
  --color-neutral-500: #dedede;
  --color-neutral-600: #d9d9d9;
  --color-neutral-700: #d1d1d1;
  --color-neutral-800: #c2c2c2;
  --color-neutral-900: #727272;

  /* MXM signature accent - deep indigo/blue */
  --color-accent-900: #1e1b6e;
  --color-accent: #3730a3;
  --color-accent-600: #4c3fd6;
  --color-accent-100: #eceaff;

  /* Semantic */
  --color-text: var(--color-black);
  --color-text-muted: var(--color-neutral-900);
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-neutral-100);
  --color-border: var(--color-neutral-400);

  /* Radius */
  --radius-default: 6px;
  --radius-large: 14px;
  --radius-pill: 999px;

  /* Content widths (~0.73 of previous - less “zoomed in”) */
  --content-width-small: 300px;
  --content-width-medium: 480px;
  --content-width-large: 660px;
  --content-width-x-large: 840px;
  --content-width-container: 1040px;

  /* Section padding rhythm (~0.75) */
  --section-padding-small: 36px;
  --section-padding-medium: 72px;
  --section-padding-large: 108px;

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
  :root {
    --section-padding-medium: 48px;
    --section-padding-large: 64px;
  }
}

/* Landing page - Atomic dark theme (scoped) */
body.landing {
  --color-accent: #d3f94e;
  --color-accent-hover: #e1ff6b;
  --color-accent-100: rgba(211, 249, 78, 0.12);
  --color-accent-600: #d3f94e;
  --color-accent-900: #0f1400;
  --color-text: #f2f2f2;
  --color-text-muted: #9a9a9a;
  --color-surface: #111111;
  --color-surface-alt: #0c0c0c;
  --color-border: #1e1e1e;
  --color-black: #060606;
  --color-white: #ffffff;
  --radius-large: 18px;
  --landing-card-r: 14px;
  --landing-max: 1240px;
  background: #060606;
  color: var(--color-text);
}

body.landing .text-accent {
  color: var(--color-accent);
}