/* Design tokens: custom properties and @font-face ONLY.
   Safe to load anywhere, including the block/classic editor canvas.
   Front-end element resets live in base.css, which the editor must NOT load.
   Original note: extracted from Desire Marketing.fig */

/* Design tokens — extracted from Desire Marketing.fig */

/* ===== Self-hosted fonts ===== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-variable.woff2") format("woff2-variations"),
       url("../fonts/inter-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
}

:root {
  /* Colors */
  --color-bg: #1d1d1d;
  --color-bg-card-dark: #1d1d1d;
  --color-bg-cream: #fcf8f5;
  --color-bg-white: #ffffff;
  --color-coral: #fe7c5d;
  --color-coral-soft: #ff7a59;
  --color-text-on-dark: #ffffff;
  --color-text-on-light: #1d1d1d;
  --color-text-muted-light: #2e2e2e;
  --color-text-muted-dark: #c3c3c3;
  --color-border-light: #bfbfbf;
  --color-border-dark: #424242;
  --color-chart-blue: #3b90e0;
  --color-chart-green: #2ecd6e;
  --color-row-divider: #bfbfbf;

  /* Typography */
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Layout. Derived from the Figma frames (402 / 1024 / 1920).
     Design grid: wide sections span the frame minus --dm-pad-x, giving
     1800 @1920, 904 @1024, 370 @402. Content sections cap at 1520 @1920,
     which lands their left edge on the design's 200px column. Above 1920
     the cap grows at half the viewport rate so wide screens are not wasted. */
  --dm-pad-x: clamp(16px, 7.07vw - 12.4px, 60px);
  --dm-content-max: max(1520px, calc(1520px + (100vw - 1920px) * 0.5));
  --dm-gutter-content: max(var(--dm-pad-x), calc((100% - var(--dm-content-max)) / 2));

  /* Radii */
  --radius-card-lg: 50px;
  --radius-card-md: 24px;
  --radius-pill: 62px;
  --radius-chip: 8px;
  --radius-sm: 4px;

  /* Shadows (subtle, as in Figma) */
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04);
}