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

:root {
  /* Primitives — brand accents and neutral graphite surfaces. */
  --ip-purple-200: #c4b7f6;
  --ip-purple-300: #a99be0;
  --ip-purple-500: #7a6bbc;
  --ip-purple-600: #6d5da7;
  --ip-purple-700: #5c4d99;
  --ip-sky-50: #eaf7fc;
  --ip-sky-500: #6ec1e4;
  --ip-sky-950: #162c37;
  --ip-white: #ffffff;
  --ip-gray-50: #f7f7f7;
  --ip-gray-100: #f2f2f2;
  --ip-gray-200: #e7e7e7;
  --ip-gray-300: #d4d4d4;
  --ip-gray-500: #717171;
  --ip-gray-600: #595959;
  --ip-gray-800: #353535;
  --ip-gray-900: #222222;
  --ip-red-300: #ff8a80;
  --ip-red-600: #b42318;
  --ip-orange-300: #ffbd66;
  --ip-orange-700: #8a4b00;
  --ip-amber-300: #f1d36b;
  --ip-amber-700: #715700;
  --ip-teal-300: #68cfc0;
  --ip-teal-700: #21675f;
  --ip-ink-100: #f7f7f7;
  --ip-ink-300: #adadad;
  --ip-ink-600: #737373;
  --ip-ink-700: #2b2b2b;
  --ip-ink-800: #282828;
  --ip-ink-850: #1b1b1b;
  --ip-ink-875: #202020;
  --ip-ink-900: #1c1c1c;
  --ip-ink-950: #141414;

  /* Fine static monochrome grain, 3.5% opacity; never layered over content. */
  --ip-texture-grain: url("../images/surface-grain-v2.svg");
  --ip-surface-texture: none;
  --ip-surface-texture-blend: normal;

  --ip-space-1: 4px;
  --ip-space-2: 8px;
  --ip-space-3: 12px;
  --ip-space-4: 16px;
  --ip-space-5: 20px;
  --ip-space-6: 24px;
  --ip-space-8: 32px;
  --ip-space-10: 40px;
  --ip-space-12: 48px;
  --ip-space-16: 64px;
  --ip-space-20: 80px;

  --ip-radius-sm: 8px;
  --ip-radius-md: 12px;
  --ip-radius-lg: 16px;
  --ip-radius-xl: 24px;
  --ip-radius-pill: 999px;

  --ip-shadow-sm: 0 1px 2px rgb(34 34 34 / 0.05);
  --ip-shadow-card: 0 6px 24px rgb(34 34 34 / 0.08);
  --ip-shadow-sticky: 0 4px 14px rgb(34 34 34 / 0.06);

  --ip-duration-fast: 150ms;
  --ip-duration-normal: 220ms;
  --ip-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Semantic tokens. */
  --ip-color-page: var(--ip-white);
  --ip-color-surface: var(--ip-white);
  --ip-color-surface-subtle: var(--ip-gray-50);
  --ip-color-surface-related: var(--ip-gray-100);
  --ip-color-accent-soft: var(--ip-sky-50);
  --ip-color-text: var(--ip-gray-900);
  --ip-color-text-muted: var(--ip-gray-600);
  --ip-color-border: var(--ip-gray-200);
  --ip-color-border-strong: var(--ip-gray-300);
  --ip-color-brand: var(--ip-purple-500);
  --ip-color-action: var(--ip-purple-600);
  --ip-color-action-hover: var(--ip-purple-700);
  --ip-color-on-action: var(--ip-white);
  --ip-color-link: var(--ip-purple-700);
  --ip-color-focus: var(--ip-purple-600);
  --ip-color-danger: var(--ip-red-600);
  --ip-color-success: #167b4b;
  --ip-color-severity-high: var(--ip-orange-700);
  --ip-color-severity-medium: var(--ip-amber-700);
  --ip-color-severity-low: var(--ip-teal-700);
  --ip-color-surface-glass: rgb(255 255 255 / 0.98);
  --ip-color-control-glass: rgb(255 255 255 / 0.96);
  --ip-color-control-glass-soft: rgb(255 255 255 / 0.94);
  --ip-color-media-control: rgb(242 242 242 / 0.96);
  --ip-color-map-line: rgb(255 255 255 / 0.76);
  --ip-color-map-marker-border: rgb(255 255 255 / 0.88);

  --ip-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ip-container-max: 1120px;
  --ip-header-height: 80px;
  --ip-section-nav-height: 56px;

  /* Component tokens. */
  --ip-input-height: 48px;
  --ip-input-radius: var(--ip-radius-md);
  --ip-input-padding: 12px 14px;
  --ip-input-title-weight: 700;
  --ip-control-target: 44px;
  --ip-switch-width: 50px;
  --ip-switch-height: 30px;
  --ip-switch-thumb: 24px;
  --ip-switch-travel: 20px;
  --ip-visibility-width: 4.5rem;
  --ip-button-radius: 20px;
  --ip-button-height: 48px;
  --ip-card-radius: var(--ip-radius-md);
  --ip-gallery-radius: var(--ip-radius-lg);
  --ip-focus-ring: 0 0 0 3px rgb(109 93 167 / 0.28);
}

/* Explicit light mode mirrors :root so it always wins over system dark mode. */
[data-theme="light"] {
  color-scheme: light;
  --ip-surface-texture: none;
  --ip-surface-texture-blend: normal;
  --ip-color-page: var(--ip-white);
  --ip-color-surface: var(--ip-white);
  --ip-color-surface-subtle: var(--ip-gray-50);
  --ip-color-surface-related: var(--ip-gray-100);
  --ip-color-accent-soft: var(--ip-sky-50);
  --ip-color-text: var(--ip-gray-900);
  --ip-color-text-muted: var(--ip-gray-600);
  --ip-color-border: var(--ip-gray-200);
  --ip-color-border-strong: var(--ip-gray-300);
  --ip-color-brand: var(--ip-purple-500);
  --ip-color-action: var(--ip-purple-600);
  --ip-color-action-hover: var(--ip-purple-700);
  --ip-color-on-action: var(--ip-white);
  --ip-color-link: var(--ip-purple-700);
  --ip-color-focus: var(--ip-purple-600);
  --ip-color-danger: var(--ip-red-600);
  --ip-color-success: #167b4b;
  --ip-color-severity-high: var(--ip-orange-700);
  --ip-color-severity-medium: var(--ip-amber-700);
  --ip-color-severity-low: var(--ip-teal-700);
  --ip-color-surface-glass: rgb(255 255 255 / 0.98);
  --ip-color-control-glass: rgb(255 255 255 / 0.96);
  --ip-color-control-glass-soft: rgb(255 255 255 / 0.94);
  --ip-color-media-control: rgb(242 242 242 / 0.96);
  --ip-color-map-line: rgb(255 255 255 / 0.76);
  --ip-color-map-marker-border: rgb(255 255 255 / 0.88);
  --ip-shadow-sm: 0 1px 2px rgb(34 34 34 / 0.05);
  --ip-shadow-card: 0 6px 24px rgb(34 34 34 / 0.08);
  --ip-shadow-sticky: 0 4px 14px rgb(34 34 34 / 0.06);
  --ip-focus-ring: 0 0 0 3px rgb(109 93 167 / 0.28);
}

/* Follow the operating-system preference only when no explicit theme exists. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  --ip-surface-texture: var(--ip-texture-grain);
  --ip-surface-texture-blend: soft-light;
    --ip-color-page: var(--ip-ink-950);
    --ip-color-surface: var(--ip-ink-900);
    --ip-color-surface-subtle: var(--ip-ink-850);
    --ip-color-surface-related: var(--ip-ink-875);
    --ip-color-accent-soft: color-mix(in srgb, var(--ip-purple-300) 12%, var(--ip-ink-900));
    --ip-color-text: var(--ip-ink-100);
    --ip-color-text-muted: var(--ip-ink-300);
    --ip-color-border: var(--ip-ink-700);
    --ip-color-border-strong: var(--ip-ink-600);
    --ip-color-brand: var(--ip-purple-300);
    --ip-color-action: var(--ip-purple-300);
    --ip-color-action-hover: var(--ip-purple-200);
    --ip-color-on-action: var(--ip-ink-950);
    --ip-color-link: var(--ip-purple-200);
    --ip-color-focus: var(--ip-purple-300);
    --ip-color-danger: var(--ip-red-300);
  --ip-color-success: #8cdebe;
    --ip-color-severity-high: var(--ip-orange-300);
    --ip-color-severity-medium: var(--ip-amber-300);
    --ip-color-severity-low: var(--ip-teal-300);
    --ip-color-surface-glass: rgb(28 28 28 / 0.98);
    --ip-color-control-glass: rgb(28 28 28 / 0.96);
    --ip-color-control-glass-soft: rgb(28 28 28 / 0.94);
    --ip-color-media-control: rgb(40 40 40 / 0.96);
    --ip-color-map-line: rgb(247 247 247 / 0.12);
    --ip-color-map-marker-border: rgb(173 173 173 / 0.58);
    --ip-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.24);
    --ip-shadow-card: 0 6px 24px rgb(0 0 0 / 0.36);
    --ip-shadow-sticky: 0 4px 14px rgb(0 0 0 / 0.3);
    --ip-focus-ring: 0 0 0 3px rgb(169 155 224 / 0.4);
  }
}

/* Explicit dark mode, used by the header theme control. */
[data-theme="dark"] {
  color-scheme: dark;
  --ip-surface-texture: var(--ip-texture-grain);
  --ip-surface-texture-blend: soft-light;
  --ip-color-page: var(--ip-ink-950);
  --ip-color-surface: var(--ip-ink-900);
  --ip-color-surface-subtle: var(--ip-ink-850);
  --ip-color-surface-related: var(--ip-ink-875);
  --ip-color-accent-soft: color-mix(in srgb, var(--ip-purple-300) 12%, var(--ip-ink-900));
  --ip-color-text: var(--ip-ink-100);
  --ip-color-text-muted: var(--ip-ink-300);
  --ip-color-border: var(--ip-ink-700);
  --ip-color-border-strong: var(--ip-ink-600);
  --ip-color-brand: var(--ip-purple-300);
  --ip-color-action: var(--ip-purple-300);
  --ip-color-action-hover: var(--ip-purple-200);
  --ip-color-on-action: var(--ip-ink-950);
  --ip-color-link: var(--ip-purple-200);
  --ip-color-focus: var(--ip-purple-300);
  --ip-color-danger: var(--ip-red-300);
  --ip-color-success: #8cdebe;
  --ip-color-severity-high: var(--ip-orange-300);
  --ip-color-severity-medium: var(--ip-amber-300);
  --ip-color-severity-low: var(--ip-teal-300);
  --ip-color-surface-glass: rgb(28 28 28 / 0.98);
  --ip-color-control-glass: rgb(28 28 28 / 0.96);
  --ip-color-control-glass-soft: rgb(28 28 28 / 0.94);
  --ip-color-media-control: rgb(40 40 40 / 0.96);
  --ip-color-map-line: rgb(247 247 247 / 0.12);
  --ip-color-map-marker-border: rgb(173 173 173 / 0.58);
  --ip-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.24);
  --ip-shadow-card: 0 6px 24px rgb(0 0 0 / 0.36);
  --ip-shadow-sticky: 0 4px 14px rgb(0 0 0 / 0.3);
  --ip-focus-ring: 0 0 0 3px rgb(169 155 224 / 0.4);
}

/* Workspace type and layout: one scale for headings, forms and overlays. */
:root {
  --ip-type-caption: .75rem;
  --ip-type-small: .875rem;
  --ip-type-body: 1rem;
  --ip-type-section: 1.125rem;
  --ip-type-title-small: 1.25rem;
  --ip-type-title: 1.75rem;
  --ip-workspace-gutter: 32px;
  --ip-panel-padding: 24px;
  --ip-panel-gap: 24px;
  --ip-panel-radius: 20px;
  --ip-color-action-soft: color-mix(in srgb, var(--ip-color-action) 9%, var(--ip-color-surface));
  --ip-color-activity-low: color-mix(in srgb, var(--ip-color-action) 35%, var(--ip-color-surface));
  --ip-color-activity-medium: color-mix(in srgb, var(--ip-color-action) 65%, var(--ip-color-surface));
  --ip-color-activity-high: var(--ip-color-action);
  --ip-color-chart-warm: #c65335;
}
[data-theme="dark"] { --ip-color-chart-warm: #ff9c7c; }