/* realmls.ca tokens - canonical
   Mirrors realmls-ca/project/colors_and_type.css from the handoff bundle.
   Keep this file in sync with the handoff source of truth. */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap");

:root,
:root[data-theme="dark"] {
  --rm-bg: #0b1220;
  --rm-bg-2: #0f1828;
  --rm-surface-1: #131d30;
  --rm-surface-2: #182740;
  --rm-surface-3: #1f3252;
  --rm-border: #243657;
  --rm-divider: #1a2840;

  --rm-fg-1: #ffffff;
  --rm-fg-2: #c9d5e8;
  --rm-fg-3: #8fa0bd;
  --rm-fg-4: #5c6f92;
  --rm-fg-on-accent: #06121f;

  --rm-teal: #2db8a1;
  --rm-teal-bright: #4ddfc2;
  --rm-teal-deep: #1f8c7a;
  --rm-forest: #4a8c5c;
  --rm-forest-soft: rgba(74, 140, 92, 0.16);
  --rm-copper: #c97a4a;
  --rm-copper-soft: rgba(201, 122, 74, 0.16);

  --rm-accent: var(--rm-teal);
  --rm-accent-bright: var(--rm-teal-bright);
  --rm-accent-deep: var(--rm-teal-deep);
  --rm-accent-soft: rgba(45, 184, 161, 0.16);
  --rm-accent-glow: rgba(45, 184, 161, 0.34);

  --rm-up: #34c77b;
  --rm-up-soft: rgba(52, 199, 123, 0.14);
  --rm-down: #e5616f;
  --rm-down-soft: rgba(229, 97, 111, 0.14);
  --rm-flat: #8fa0bd;
  --rm-warn: #e8a547;
  --rm-warn-soft: rgba(232, 165, 71, 0.14);
  --rm-info: #4a89e8;
  --rm-info-soft: rgba(74, 137, 232, 0.14);
  --rm-risk: #c95a8c;
  --rm-risk-soft: rgba(201, 90, 140, 0.14);

  --rm-map-1: #2db8a1;
  --rm-map-2: #6fcda9;
  --rm-map-3: #bfd9a0;
  --rm-map-4: #e8c97a;
  --rm-map-5: #e89a6b;
  --rm-map-6: #c95a8c;

  --rm-font-display: "Sora", system-ui, sans-serif;
  --rm-font-serif: "Fraunces", Georgia, serif;
  --rm-font-sans: "Inter", system-ui, sans-serif;
  --rm-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --rm-text-display: 700 72px/1.02 var(--rm-font-display);
  --rm-text-h1: 700 48px/1.08 var(--rm-font-display);
  --rm-text-h2: 700 34px/1.12 var(--rm-font-display);
  --rm-text-h3: 600 24px/1.25 var(--rm-font-display);
  --rm-text-h4: 600 18px/1.35 var(--rm-font-display);
  --rm-text-lead: 400 18px/1.55 var(--rm-font-sans);
  --rm-text-body: 400 15px/1.55 var(--rm-font-sans);
  --rm-text-small: 400 13px/1.5 var(--rm-font-sans);
  --rm-text-tiny: 400 11px/1.4 var(--rm-font-sans);
  --rm-text-label: 600 11px/1.2 var(--rm-font-sans);
  --rm-text-mono: 500 14px/1.4 var(--rm-font-mono);
  --rm-text-mono-lg: 600 22px/1.2 var(--rm-font-mono);
  --rm-text-editorial: 500 32px/1.18 var(--rm-font-serif);

  --rm-r-xs: 3px;
  --rm-r-sm: 4px;
  --rm-r-md: 6px;
  --rm-r-lg: 8px;
  --rm-r-xl: 12px;
  --rm-r-pill: 999px;

  --rm-shadow-hairline: 0 1px 0 rgba(0, 0, 0, 0.35);
  --rm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.22);
  --rm-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.38);
  --rm-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  --rm-shadow-glow: 0 0 28px var(--rm-accent-glow);
  --rm-shadow-glow-up: 0 0 24px rgba(52, 199, 123, 0.45);

  --rm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rm-dur-fast: 120ms;
  --rm-dur-base: 180ms;

  --rm-density: 1;
  --rm-pad-1: calc(8px * var(--rm-density));
  --rm-pad-2: calc(12px * var(--rm-density));
  --rm-pad-3: calc(16px * var(--rm-density));
  --rm-pad-4: calc(24px * var(--rm-density));
  --rm-pad-5: calc(32px * var(--rm-density));
  --rm-row-h: calc(44px * var(--rm-density));
}

:root[data-theme="light"] {
  --rm-bg: #f6f4ee;
  --rm-bg-2: #fbfaf6;
  --rm-surface-1: #ffffff;
  --rm-surface-2: #ffffff;
  --rm-surface-3: #f0ede4;
  --rm-border: #e2ddd0;
  --rm-divider: #ece7da;
  --rm-fg-1: #14202e;
  --rm-fg-2: #2c3b52;
  --rm-fg-3: #5c6f8a;
  --rm-fg-4: #8597ae;
  --rm-fg-on-accent: #ffffff;
  --rm-teal-bright: #2db8a1;
  --rm-accent-glow: rgba(45, 184, 161, 0.25);
  --rm-shadow-hairline: 0 1px 0 rgba(20, 32, 46, 0.06);
  --rm-shadow-sm: 0 1px 2px rgba(20, 32, 46, 0.06), 0 2px 8px rgba(20, 32, 46, 0.04);
  --rm-shadow-md: 0 6px 24px rgba(20, 32, 46, 0.1);
  --rm-shadow-lg: 0 18px 48px rgba(20, 32, 46, 0.14);
}

:root[data-accent="forest"] {
  --rm-accent: #4a8c5c;
  --rm-accent-bright: #6fb07f;
  --rm-accent-deep: #2f6a40;
  --rm-accent-soft: rgba(74, 140, 92, 0.16);
  --rm-accent-glow: rgba(74, 140, 92, 0.34);
}

:root[data-accent="copper"] {
  --rm-accent: #c97a4a;
  --rm-accent-bright: #e89a6b;
  --rm-accent-deep: #9e5a33;
  --rm-accent-soft: rgba(201, 122, 74, 0.16);
  --rm-accent-glow: rgba(201, 122, 74, 0.34);
}

:root[data-accent="indigo"] {
  --rm-accent: #5566d9;
  --rm-accent-bright: #7b8bf0;
  --rm-accent-deep: #3a47a8;
  --rm-accent-soft: rgba(85, 102, 217, 0.16);
  --rm-accent-glow: rgba(85, 102, 217, 0.34);
}

:root[data-accent="slate"] {
  --rm-accent: #4a6280;
  --rm-accent-bright: #6f89ab;
  --rm-accent-deep: #324560;
  --rm-accent-soft: rgba(74, 98, 128, 0.16);
  --rm-accent-glow: rgba(74, 98, 128, 0.34);
}

.rm-display {
  font-family: var(--rm-font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  line-height: 1.02;
  color: var(--rm-fg-1);
  letter-spacing: 0;
}
.rm-h1 { font: var(--rm-text-h1); color: var(--rm-fg-1); letter-spacing: 0; }
.rm-h2 { font: var(--rm-text-h2); color: var(--rm-fg-1); letter-spacing: 0; }
.rm-h3 { font: var(--rm-text-h3); color: var(--rm-fg-1); letter-spacing: 0; }
.rm-h4 { font: var(--rm-text-h4); color: var(--rm-fg-1); }
.rm-editorial { font: var(--rm-text-editorial); color: var(--rm-fg-1); letter-spacing: 0; font-style: italic; }
.rm-lead { font: var(--rm-text-lead); color: var(--rm-fg-2); }
.rm-body { font: var(--rm-text-body); color: var(--rm-fg-2); }
.rm-small { font: var(--rm-text-small); color: var(--rm-fg-3); }
.rm-tiny { font: var(--rm-text-tiny); color: var(--rm-fg-3); }
.rm-label { font: var(--rm-text-label); color: var(--rm-fg-3); text-transform: uppercase; letter-spacing: 0; }
.rm-mono { font: var(--rm-text-mono); font-variant-numeric: tabular-nums; color: var(--rm-fg-1); }
.rm-mono-lg { font: var(--rm-text-mono-lg); font-variant-numeric: tabular-nums; color: var(--rm-fg-1); letter-spacing: 0; }

/* Accessibility: respect OS-level motion-reduction. Motion is decorative
   on this site (button glow, skip-link slide). Disable when requested. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}