/* Marigold Design System — Colors & Type
 * Zapier Marketing UI — extracted from ui/src/styles/{colors,fonts,typography}.scss
 * All values verified against the real codebase. Do not invent new ones.
 */

/* ─────────────────────────────────────────────────────────── */
/* FONTS                                                      */
/* Degular Display is a proprietary font (Zapier license).   */
/* Loaded from fonts.zapier.com — works in browser w/ network. */
/* Inter comes from Google Fonts. Serrif is Zapier-licensed;   */
/* we substitute Instrument Serif as the closest free match.   */
/* ─────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

@font-face {
  font-family: 'Degular Display';
  src: url('fonts/DegularDisplay-Medium.otf') format('opentype'),
       url('https://fonts.zapier.com/Degular/DegularDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Degular Display';
  src: url('https://fonts.zapier.com/Degular/DegularDisplay-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Degular Display';
  src: url('https://fonts.zapier.com/Degular/Degular_Display-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Color tokens (raw) ──────────────────────────────── */

  /* Neutrals: warm bone→coal scale. Marigold reads these as a literal warmth gradient, not greyscale. */
  --mg-neutral-100: #fffefb;  /* page bg, "bone" */
  --mg-neutral-200: #f8f4f0;  /* secondary bg, "cream" */
  --mg-neutral-300: #eceae3;  /* hairlines, card surfaces */
  --mg-neutral-400: #dfdcd2;  /* disabled bg, dividers */
  --mg-neutral-500: #c5c0b1;  /* input borders, muted rule */
  --mg-neutral-600: #939084;  /* disabled fg, meta text */
  --mg-neutral-700: #605d52;  /* body secondary */
  --mg-neutral-800: #36342e;  /* body primary on dark surfaces */
  --mg-neutral-900: #201515;  /* "earth" — primary ink, primary button bg */

  /* Accents */
  --mg-brand: #e8a838;        /* marigold accent — CTAs, highlights */
  --mg-brand-dark: #b8821f;   /* brand hover/active */
  --mg-plum: #1f2a3a;         /* deep ink-navy surface */
  --mg-plum-light: #f1e7ef;   /* plum tint surface */
  --mg-moss: #1e3a3a;         /* deep teal surface — complements orange */

  /* Semantic */
  --mg-error: #d12d37;
  --mg-success: #2ca47e;

  /* ── Semantic aliases (how components consume colors) ── */
  --mg-bg: var(--mg-neutral-100);
  --mg-bg-subtle: var(--mg-neutral-200);
  --mg-bg-card: var(--mg-neutral-100);
  --mg-bg-inverse: var(--mg-neutral-900);

  --mg-fg: var(--mg-neutral-900);
  --mg-fg-secondary: var(--mg-neutral-700);
  --mg-fg-muted: var(--mg-neutral-600);
  --mg-fg-inverse: var(--mg-neutral-100);

  --mg-border: var(--mg-neutral-300);
  --mg-border-strong: var(--mg-neutral-500);
  --mg-border-ink: var(--mg-neutral-900);

  --mg-focus-ring: var(--mg-neutral-900);

  /* ── Font families ─────────────────────────────────────── */
  --mg-font-base: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mg-font-display: 'Degular Display', 'Inter', ui-sans-serif, sans-serif;
  --mg-font-display-serif: 'Instrument Serif', ui-serif, Georgia, serif; /* SUBSTITUTE for Zapier's "Serrif" */

  /* ── Type scale (from typography.scss) ─────────────────── */
  --mg-text-xs: 0.75rem;     /* 12 */
  --mg-text-sm: 0.875rem;    /* 14 */
  --mg-text-base: 1rem;      /* 16 */
  --mg-text-lg: 1.125rem;    /* 18 */
  --mg-text-xl: 1.25rem;     /* 20 */
  --mg-text-2xl: 1.5rem;     /* 24 */
  --mg-text-3xl: 2rem;       /* 32 */
  --mg-text-4xl: 2.5rem;     /* 40 */
  --mg-text-5xl: 3rem;       /* 48 */
  --mg-text-6xl: 3.5rem;     /* 56 */
  --mg-text-7xl: 4rem;       /* 64 */
  --mg-text-8xl: 5rem;       /* 80 */

  --mg-leading-tight: 1;
  --mg-leading-default: 1.25;
  --mg-leading-loose: 1.5;

  /* ── Spacing / radius / shadow ─────────────────────────── */
  --mg-gap-1: 4px;
  --mg-gap-2: 8px;
  --mg-gap-3: 12px;
  --mg-gap-4: 16px;
  --mg-gap-5: 20px;
  --mg-gap-6: 24px;
  --mg-gap-7: 28px;
  --mg-gap-8: 32px;

  --mg-radius-sm: 4px;   /* buttons, inputs, badges — Marigold radius is uniformly 4px */
  --mg-radius-md: 6px;   /* header skip link, some menu surfaces */

  /* Elevation — Marigold is flat; shadow is used sparingly on overlays only. */
  --mg-shadow-overlay: 0 10px 30px -10px rgba(32, 21, 21, 0.18);

  /* Breakpoints (for reference) */
  --mg-bp-xs: 480px;
  --mg-bp-sm: 640px;
  --mg-bp-md: 768px;
  --mg-bp-lg: 1024px;
  --mg-bp-xl: 1280px;

  /* Motion */
  --mg-dur: 250ms;
  --mg-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Header */
  --mg-header-height: 56px;
}

/* ─────────────────────────────────────────────────────────── */
/* SEMANTIC TYPE CLASSES (mirror atoms.module.scss mixins)     */
/* ─────────────────────────────────────────────────────────── */

.mg-heading-2xl,
.mg-heading-xl,
.mg-heading-lg {
  font-family: var(--mg-font-display);
  font-weight: 500;
  line-height: var(--mg-leading-tight);
  letter-spacing: -0.01em;
}
.mg-heading-2xl { font-size: var(--mg-text-5xl); }
.mg-heading-xl  { font-size: var(--mg-text-4xl); }
.mg-heading-lg  { font-size: var(--mg-text-3xl); }
@media (min-width: 640px) {
  .mg-heading-2xl { font-size: var(--mg-text-6xl); }
  .mg-heading-xl  { font-size: var(--mg-text-5xl); }
  .mg-heading-lg  { font-size: var(--mg-text-4xl); }
}
@media (min-width: 1024px) {
  .mg-heading-2xl { font-size: var(--mg-text-7xl); }
  .mg-heading-xl  { font-size: var(--mg-text-6xl); }
  .mg-heading-lg  { font-size: var(--mg-text-5xl); }
}

.mg-heading-md,
.mg-heading-sm,
.mg-heading-xs {
  font-family: var(--mg-font-base);
  font-weight: 600;
  line-height: var(--mg-leading-default);
  letter-spacing: -0.025em;
}
.mg-heading-md { font-size: var(--mg-text-xl); }
.mg-heading-sm { font-size: var(--mg-text-lg); }
.mg-heading-xs { font-size: var(--mg-text-base); }
@media (min-width: 640px) {
  .mg-heading-md { font-size: var(--mg-text-2xl); }
  .mg-heading-sm { font-size: var(--mg-text-xl); }
  .mg-heading-xs { font-size: var(--mg-text-lg); }
}
@media (min-width: 1024px) {
  .mg-heading-md { font-size: var(--mg-text-3xl); }
  .mg-heading-sm { font-size: var(--mg-text-2xl); }
  .mg-heading-xs { font-size: var(--mg-text-xl); }
}

.mg-body-xl,
.mg-body-lg,
.mg-body,
.mg-body-sm,
.mg-body-xs {
  font-family: var(--mg-font-base);
  font-weight: 400;
  line-height: var(--mg-leading-loose);
}
.mg-body-xl { font-size: var(--mg-text-lg); line-height: var(--mg-leading-default); }
.mg-body-lg { font-size: var(--mg-text-base); }
.mg-body    { font-size: var(--mg-text-sm);  }
.mg-body-sm { font-size: var(--mg-text-xs);  }
.mg-body-xs { font-size: var(--mg-text-xs);  }
@media (min-width: 1024px) {
  .mg-body-xl { font-size: var(--mg-text-xl); }
  .mg-body-lg { font-size: var(--mg-text-lg); }
  .mg-body    { font-size: var(--mg-text-base); }
  .mg-body-sm { font-size: var(--mg-text-sm); }
}

.mg-eyebrow {
  font-family: var(--mg-font-base);
  font-weight: 400;
  font-size: var(--mg-text-xs);
  line-height: var(--mg-leading-loose);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mg-neutral-700);
}

/* ── Element defaults that mirror Marigold's h*/p behavior ── */
.mg-prose h1 { font-family: var(--mg-font-display); font-weight: 500; font-size: var(--mg-text-5xl); line-height: var(--mg-leading-tight); }
.mg-prose h2 { font-family: var(--mg-font-display); font-weight: 500; font-size: var(--mg-text-4xl); line-height: var(--mg-leading-tight); }
.mg-prose h3 { font-family: var(--mg-font-base);    font-weight: 600; font-size: var(--mg-text-xl); line-height: var(--mg-leading-default); letter-spacing: -0.025em; }
.mg-prose p  { font-family: var(--mg-font-base);    font-weight: 400; font-size: var(--mg-text-base); line-height: var(--mg-leading-loose); color: var(--mg-fg); }
.mg-prose a  { color: inherit; text-decoration: underline; }
.mg-prose a:hover { text-decoration: none; }

/* ── Surface helpers (from atoms.module.scss) ── */
.mg-bg-bone      { background: var(--mg-neutral-100); color: var(--mg-neutral-900); }
.mg-bg-cream     { background: var(--mg-neutral-200); color: var(--mg-neutral-900); }
.mg-bg-earth     { background: var(--mg-neutral-900); color: var(--mg-neutral-100); }
.mg-bg-coal      { background: var(--mg-neutral-800); color: var(--mg-neutral-100); }
.mg-bg-moss      { background: var(--mg-moss);        color: var(--mg-neutral-100); }
.mg-bg-plum      { background: var(--mg-plum);        color: var(--mg-neutral-100); }
.mg-bg-plum-light{ background: var(--mg-plum-light);  color: var(--mg-neutral-900); }
.mg-bg-brand     { background: var(--mg-brand);       color: var(--mg-neutral-100); }