@font-face {
  font-family: "Manrope DPE";
  src: url("fonts/manrope-var.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Inter DPE";
  src: url("fonts/inter-ro.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces DPE";
  src: url("fonts/fraunces-ro.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "FTTC Inter";
  src: url("fonts/inter-ro.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "FTTC Fraunces";
  src: url("fonts/fraunces-ro.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

.dpe-public {
  /* Canonical public color system. */
  --dpe-color-ink: #0b1930;
  --dpe-color-ink-soft: #253a57;
  --dpe-color-night: #020817;
  --dpe-color-navy: #07152c;
  --dpe-color-navy-raised: #0d2344;
  --dpe-color-action: #1b5ff5;
  --dpe-color-action-hover: #124fd2;
  --dpe-color-accent: #24c4da;
  --dpe-color-surface-tint: #eef5fd;
  --dpe-color-canvas: #f8fbff;
  --dpe-color-surface: #ffffff;
  --dpe-color-border: #d5e0ee;
  --dpe-color-border-dark: rgba(255, 255, 255, 0.14);
  --dpe-color-muted: #566b86;
  --dpe-color-review-copy: #cbd8eb;
  --dpe-color-footer-copy: #aebdd1;
  --dpe-color-footer-closing: #7489a5;
  --dpe-color-footer-watermark: #566b86;

  /* Canonical typography, geometry and motion. */
  --dpe-font-body: "Inter DPE", Arial, sans-serif;
  --dpe-font-display: "Manrope DPE", Arial, sans-serif;
  --dpe-layout-shell: 1240px;
  --dpe-layout-gutter: 32px;
  --dpe-radius-action: 8px;
  --dpe-radius-panel: 8px;
  --dpe-duration-fast: 160ms;
  --dpe-shadow-action: 0 10px 28px rgba(10, 43, 102, 0.12);
  --dpe-shadow-action-primary: 0 12px 30px rgba(27, 95, 245, 0.24);
  --dpe-shadow-menu: 0 18px 60px rgba(7, 21, 44, 0.18);

  /* M1.2-COMPAT: remove aliases only after M1.2c selector and token closeout. */
  --dpe-ink: var(--dpe-color-ink);
  --dpe-ink-soft: var(--dpe-color-ink-soft);
  --dpe-night: var(--dpe-color-night);
  --dpe-navy: var(--dpe-color-navy);
  --dpe-navy-2: var(--dpe-color-navy-raised);
  --dpe-blue: var(--dpe-color-action);
  --dpe-cyan: var(--dpe-color-accent);
  --dpe-ice: var(--dpe-color-surface-tint);
  --dpe-paper: var(--dpe-color-canvas);
  --dpe-white: var(--dpe-color-surface);
  --dpe-line: var(--dpe-color-border);
  --dpe-line-dark: var(--dpe-color-border-dark);
  --dpe-muted: var(--dpe-color-muted);
  --dpe-shell: var(--dpe-layout-shell);
  --dpe-gutter: var(--dpe-layout-gutter);
}

:is(.fttc-course, .fttc-legal) {
  /* FTTC course and legal surfaces keep their own editorial identity. */
  --fttc-color-night: #031335;
  --fttc-color-navy: #061b4d;
  --fttc-color-action: #1457d9;
  --fttc-color-accent: #35c9df;
  --fttc-color-highlight: #59d2e3;
  --fttc-color-support: #1262ee;
  --fttc-color-soft-accent: #86adff;
  --fttc-color-ink: #111a2b;
  --fttc-color-muted: #59647a;
  --fttc-color-line: #d8dfeb;
  --fttc-color-canvas: #f4f7fc;
  --fttc-color-surface: #ffffff;
  --fttc-font-body: "Inter DPE", "Segoe UI", Arial, sans-serif;
  --fttc-font-display: "Fraunces DPE", Georgia, serif;

  /* M1.2-COMPAT: local aliases retained until selector/token closeout. */
  --font-body: var(--fttc-font-body);
  --font-display: var(--fttc-font-display);
  --navy-950: var(--fttc-color-night);
  --navy-900: var(--fttc-color-navy);
  --cobalt: var(--fttc-color-action);
  --cyan: var(--fttc-color-accent);
  --yellow: var(--fttc-color-highlight);
  --coral: var(--fttc-color-support);
  --mint: var(--fttc-color-soft-accent);
  --ink: var(--fttc-color-ink);
  --muted: var(--fttc-color-muted);
  --line: var(--fttc-color-line);
  --paper: var(--fttc-color-canvas);
  --white: var(--fttc-color-surface);
}

.dpe-checkout {
  /* Checkout uses the FTTC commercial palette, isolated from DPE public. */
  --fttc-checkout-navy: #00194f;
  --fttc-checkout-night: #061225;
  --fttc-checkout-action: #1167ee;
  --fttc-checkout-action-hover: #0755ce;
  --fttc-checkout-accent: #2de0ea;
  --fttc-checkout-highlight: #5ed5e7;
  --fttc-checkout-ink: #142038;
  --fttc-checkout-muted: #5d6a7f;
  --fttc-checkout-canvas: #eef3f8;
  --fttc-checkout-line: #dce4ed;
  --fttc-checkout-font-body: "FTTC Inter", Inter, "Segoe UI", sans-serif;
  --fttc-checkout-font-display: "FTTC Fraunces", Fraunces, Georgia, serif;

  /* Existing page aliases. */
  --tt-navy: var(--fttc-checkout-navy);
  --tt-navy-deep: var(--fttc-checkout-night);
  --tt-blue: var(--fttc-checkout-action);
  --tt-blue-dark: var(--fttc-checkout-action-hover);
  --tt-cyan: var(--fttc-checkout-accent);
  --tt-highlight: var(--fttc-checkout-highlight);
  --tt-ink: var(--fttc-checkout-ink);
  --tt-muted: var(--fttc-checkout-muted);
  --tt-canvas: var(--fttc-checkout-canvas);
  --tt-line: var(--fttc-checkout-line);
  --font-body: var(--fttc-checkout-font-body);
  --font-display: var(--fttc-checkout-font-display);

  /* Proven checkout primitives migrated from base.css, value-preserving. */
  --ink-950: #171419;
  --ink-800: #343038;
  --ink-600: #625d66;
  --ink-500: #7b7580;
  --line-strong: #cbc7cd;
  --line: #e2dfe3;
  --surface: #ffffff;
  --success: #176b58;
  --success-bg: #e8f5f0;
  --warning: #9a5b0b;
  --warning-bg: #fff4dc;
  --danger: #a52f3c;
  --danger-bg: #fcecef;
  --info: #315f77;
  --info-bg: #e9f2f6;
  --shadow: 0 18px 50px rgba(33, 22, 28, 0.08);
  --radius: 8px;
}

@media (max-width: 900px) {
  .dpe-public { --dpe-layout-gutter: 24px; }
}

@media (max-width: 720px) {
  .dpe-public { --dpe-layout-gutter: 18px; }
}

@media (max-width: 430px) {
  .dpe-public { --dpe-layout-gutter: 16px; }
}