@font-face {
  font-family: "Quincy CF";
  src: url("../fonts/quincy/Quincy-CF-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Quincy CF";
  src: url("../fonts/quincy/Quincy_CF_Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Brand palette */
  --km-color-ink-900: #1f1a3e;
  --km-color-ink-700: #4a446d;
  --km-color-brand-500: #b456ff;
  --km-color-brand-400: #d566df;
  --km-color-accent-300: #f8e0ab;
  --km-color-paper-100: #f0eee6;

  /* Semantic colours */
  --km-color-success-500: #53c18a;
  --km-color-warning-500: #f0c770;
  --km-color-danger-500: #df6a87;
  --km-color-info-500: #7d97ff;

  /* Background / surface */
  --km-bg: #1f1a3e;
  --km-bg-elevated: #2a2450;
  --km-surface-1: #2a2450;
  --km-surface-2: rgba(42, 34, 80, 0.86);
  --km-surface-3: rgba(240, 238, 230, 0.04);
  --km-surface-4: rgba(240, 238, 230, 0.07);
  --km-overlay: rgba(10, 8, 20, 0.74);

  /* Text */
  --km-text: #f0eee6;
  --km-text-soft: rgba(240, 238, 230, 0.78);
  --km-text-muted: #9d98b8;
  --km-text-inverse: #ffffff;

  /* Borders */
  --km-border-soft: rgba(240, 238, 230, 0.07);
  --km-border-strong: rgba(180, 86, 255, 0.15);
  --km-border-brand: rgba(180, 86, 255, 0.28);
  --km-border-accent: rgba(248, 224, 171, 0.22);

  /* Interaction */
  --km-hover-soft: rgba(240, 238, 230, 0.08);
  --km-hover-brand: rgba(180, 86, 255, 0.16);
  --km-focus-ring: 0 0 0 3px rgba(248, 224, 171, 0.16);

  /* Typography */
  --km-font-display: "Quincy CF", "Times New Roman", serif;
  --km-font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --km-font-size-xs: 0.78rem;
  --km-font-size-sm: 0.88rem;
  --km-font-size-md: 0.9375rem;
  --km-font-size-lg: 1.08rem;
  --km-font-size-xl: clamp(1.3rem, 2vw, 1.65rem);
  --km-font-size-2xl: clamp(1.75rem, 4vw, 3.25rem);
  --km-font-size-3xl: clamp(2.375rem, 5.5vw, 5.125rem);

  --km-line-height-tight: 1.08;
  --km-line-height-copy: 1.85;
  --km-line-height-relaxed: 1.78;

  --km-weight-regular: 400;
  --km-weight-medium: 500;
  --km-weight-semibold: 600;
  --km-weight-bold: 700;

  /* Spacing scale */
  --km-space-1: 0.25rem;
  --km-space-2: 0.5rem;
  --km-space-3: 0.75rem;
  --km-space-4: 1rem;
  --km-space-5: 1.25rem;
  --km-space-6: 1.5rem;
  --km-space-7: 1.75rem;
  --km-space-8: 2rem;
  --km-space-9: 2.5rem;
  --km-space-10: 3rem;
  --km-space-11: 4rem;
  --km-space-12: 5rem;

  /* Layout */
  --km-shell: 1180px;
  --km-shell-wide: 1280px;
  --km-shell-narrow: 860px;
  --km-page-gutter: clamp(18px, 3vw, 32px);
  --km-section-space: clamp(2.8rem, 5vw, 5rem);

  /* Component sizing */
  --km-card-padding: clamp(1rem, 2vw, 1.5rem);
  --km-card-padding-lg: clamp(1.25rem, 2.4vw, 1.9rem);
  --km-input-padding-y: 0.9rem;
  --km-input-padding-x: 1rem;
  --km-button-padding-y: 0.84rem;
  --km-button-padding-x: 1.2rem;

  /* Scope-split radii */
  --km-public-radius: 0px;
  --km-portal-radius: 12px;
  --km-portal-radius-sm: 8px;

  /* Legacy radius scale */
  --km-radius-sm: 14px;
  --km-radius-md: 18px;
  --km-radius-lg: 24px;
  --km-radius-xl: 32px;
  --km-radius-pill: 999px;

  /* Shadows */
  --km-shadow-soft: 0 10px 30px rgba(8, 5, 18, 0.18);
  --km-shadow-card: 0 18px 48px rgba(7, 5, 18, 0.26);
  --km-shadow-raised: 0 22px 56px rgba(7, 5, 18, 0.34);

  /* Motion */
  --km-transition-fast: 160ms ease;
  --km-transition-base: 220ms ease;

  /* Z-index */
  --km-z-header: 50;
  --km-z-dropdown: 70;
  --km-z-modal: 90;
  --km-z-popover: 100;

  /* Special surfaces */
  --km-footer-bg: #16123a;

  /* Button tokens — default = flat public style; portal overrides in design-system */
  --km-button-primary-bg: var(--km-color-paper-100);
  --km-button-primary-color: var(--km-color-ink-900);
  --km-button-primary-hover-bg: var(--km-color-accent-300);

  /* ── Legacy aliases (used by main.css + portal.css) ── */
  --km-primary: var(--km-color-brand-500);
  --km-primary-2: var(--km-color-brand-400);
  --km-accent: var(--km-color-accent-300);
  --km-accent-light: #ffe8b8;
  --km-secondary: var(--km-color-ink-700);
  --km-success: var(--km-color-success-500);
  --km-danger: var(--km-color-danger-500);
  --km-surface: var(--km-surface-1);
  --km-border: var(--km-border-soft);
  --km-muted: var(--km-text-muted);
  --km-display: var(--km-font-display);
  --km-ui: var(--km-font-ui);
  --km-radius: var(--km-portal-radius);
  --km-card-radius: var(--km-portal-radius);
  --km-card-radius-sm: var(--km-portal-radius-sm);
  --km-shadow: var(--km-shadow-raised);
}