/* Iggy design tokens, 2026 Creative Planning brand guide. Light on :root; dark only under
 * prefers-color-scheme (no theme switch). The palette is closed: Charcoal Ledger #333433, Heritage
 * Ivory #F8F1E6, Brand Blue #165D7D, Sandstone #D4C8B8, Gold #CCA15E, the interface-only blues
 * (#457D97, #739BB1, #A2BCCB, #D0DEE5, never for type) and the status colours. Source of truth for
 * colour and type. No grey, no pure white or black, no shadow, no gradient. */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dm-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/dm-sans-700.woff2') format('woff2');
}

:root {
  color-scheme: light;

  /* Palette, used by name where a screen needs a fixed brand colour. */
  --cp-color-blue-80: #457d97;
  --cp-color-blue-60: #739bb1;
  --cp-color-blue-40: #a2bccb;
  --cp-color-blue-20: #d0dee5;
  --cp-color-sandstone: #d4c8b8;
  /* Gold: the sidebar edge, the sign-in rule and three nodes of the sign-in tree, nothing else. */
  --cp-color-accent: #cca15e;

  /* Brand */
  --cp-color-primary: #165d7d;
  --cp-color-primary-hover: #333433;
  --cp-color-primary-muted: #d0dee5;
  --cp-color-on-primary: #f8f1e6;
  --cp-color-brand-surface: #333433;
  --cp-color-brand-surface-elevated: #165d7d;
  --cp-color-on-brand: #f8f1e6;
  --cp-color-selected-edge: #165d7d;

  /* Surfaces and text: Ivory ground, Charcoal text. Quieter text is smaller, never lighter. */
  --cp-color-bg: #f8f1e6;
  --cp-color-surface: #f8f1e6;
  --cp-color-surface-muted: #f8f1e6;
  --cp-color-fg: #333433;
  --cp-color-fg-muted: #333433;
  --cp-color-border: #d4c8b8;
  --cp-color-border-control: #457d97;
  --cp-color-secondary-border: #333433;
  --cp-color-focus: #165d7d;
  --cp-color-focus-on-brand: #f8f1e6;
  --cp-color-on-accent: #333433;
  /* Sign-in call to action. */
  --cp-color-cta: #333433;
  --cp-color-on-cta: #f8f1e6;
  --cp-color-cta-hover: #165d7d;
  --cp-color-on-cta-hover: #f8f1e6;
  --cp-color-sidebar-rule: #333433;

  /* Status: fg is text on bg, border outlines the box. */
  --cp-color-success-fg: #037e4a;
  --cp-color-success-bg: #f8f1e6;
  --cp-color-success-border: #037e4a;
  --cp-color-danger-fg: #dd0404;
  --cp-color-danger-bg: #f8f1e6;
  --cp-color-danger-border: #dd0404;
  --cp-color-warning-fg: #333433;
  --cp-color-warning-bg: #d4c8b8;
  --cp-color-warning-border: #d4c8b8;
  --cp-color-info-fg: #333433;
  --cp-color-info-bg: #d0dee5;
  --cp-color-info-border: #457d97;
  --cp-color-neutral-fg: #333433;
  --cp-color-neutral-bg: #f8f1e6;
  --cp-color-neutral-border: #457d97;

  /* Escalate: Ivory on red, always with the triangle and the word. */
  --cp-color-escalate-fg: #dd0404;
  --cp-color-escalate-bg: #f8f1e6;
  --cp-color-escalate-border: #dd0404;
  --cp-color-escalate-solid: #dd0404;
  --cp-color-on-escalate: #f8f1e6;

  /* Confidence bands: a fill, a text colour and a border. A band also carries a text label. */
  --cp-band-high-bg: #165d7d;
  --cp-band-high-fg: #f8f1e6;
  --cp-band-high-border: #165d7d;
  --cp-band-medium-bg: #a2bccb;
  --cp-band-medium-fg: #333433;
  --cp-band-medium-border: #a2bccb;
  --cp-band-low-bg: #d0dee5;
  --cp-band-low-fg: #333433;
  --cp-band-low-border: #d0dee5;
  --cp-band-none-bg: #f8f1e6;
  --cp-band-none-fg: #333433;
  --cp-band-none-border: #333433;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --cp-color-primary: #f8f1e6;
    --cp-color-primary-hover: #a2bccb;
    --cp-color-primary-muted: #165d7d;
    --cp-color-on-primary: #333433;
    --cp-color-selected-edge: #f8f1e6;

    --cp-color-bg: #333433;
    --cp-color-surface: #333433;
    --cp-color-surface-muted: #333433;
    --cp-color-fg: #f8f1e6;
    --cp-color-fg-muted: #f8f1e6;
    --cp-color-border: #457d97;
    --cp-color-border-control: #739bb1;
    --cp-color-secondary-border: #739bb1;
    --cp-color-focus: #f8f1e6;
    --cp-color-cta: #f8f1e6;
    --cp-color-on-cta: #333433;
    --cp-color-cta-hover: #a2bccb;
    --cp-color-on-cta-hover: #333433;
    --cp-color-sidebar-rule: #457d97;

    --cp-color-success-fg: #2eb07a;
    --cp-color-success-bg: #333433;
    --cp-color-success-border: #2eb07a;
    --cp-color-danger-fg: #ff6d6d;
    --cp-color-danger-bg: #333433;
    --cp-color-danger-border: #ff6d6d;
    --cp-color-info-fg: #f8f1e6;
    --cp-color-info-bg: #165d7d;
    --cp-color-info-border: #739bb1;
    --cp-color-neutral-fg: #f8f1e6;
    --cp-color-neutral-bg: #333433;
    --cp-color-neutral-border: #739bb1;

    --cp-color-escalate-fg: #ff6d6d;
    --cp-color-escalate-bg: #333433;
    --cp-color-escalate-border: #ff6d6d;
    --cp-color-escalate-solid: #ff6d6d;
    --cp-color-on-escalate: #333433;

    /* Medium uses Blue 40, not Blue 60: Charcoal on Blue 60 is 4.2:1, under AA. */
    --cp-band-high-bg: #f8f1e6;
    --cp-band-high-fg: #333433;
    --cp-band-high-border: #f8f1e6;
    --cp-band-medium-bg: #a2bccb;
    --cp-band-medium-fg: #333433;
    --cp-band-medium-border: #a2bccb;
    --cp-band-low-bg: #333433;
    --cp-band-low-fg: #f8f1e6;
    --cp-band-low-border: #739bb1;
    --cp-band-none-bg: #333433;
    --cp-band-none-fg: #f8f1e6;
    --cp-band-none-border: #d4c8b8;
  }
}

/* One spacing scale: 4, 8, 12, 16, 24, 32. */
:root {
  --cp-space-1: 0.25rem;
  --cp-space-2: 0.5rem;
  --cp-space-3: 0.75rem;
  --cp-space-4: 1rem;
  --cp-space-6: 1.5rem;
  --cp-space-8: 2rem;

  /* Control height: 32px. WCAG 2.2 asks 24px; touch screens get 44px. */
  --cp-target-min: 2rem;
  --cp-content-max: 76rem;
  --cp-gutter: 1.75rem;
  --cp-sidebar: 14rem;
}
@media (pointer: coarse) {
  :root { --cp-target-min: 2.75rem; }
}

/* One radius scale: 4px for controls and surfaces, 3px for badges and key hints. */
:root {
  --cp-radius-sm: 4px;
  --cp-radius-xs: 3px;
}

/* Type: DM Sans for body and UI (self-hosted, SIL OFL 1.1); Georgia, regular weight, for headings. */
:root {
  --cp-font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
  --cp-font-serif: Georgia, 'Times New Roman', serif;

  --cp-text-base: 0.875rem;
  --cp-text-base-leading: 1.25rem;
  --cp-text-sm: 0.8125rem;
  --cp-text-sm-leading: 1.125rem;
  --cp-text-xs: 0.75rem;
  --cp-text-xs-leading: 1rem;
  --cp-text-heading-lg: 1.75rem;
  --cp-text-heading-lg-leading: 2.25rem;
  --cp-text-heading-md: 1.125rem;
  --cp-text-heading-md-leading: 1.5rem;
  --cp-text-heading-sm: 1rem;
  --cp-text-heading-sm-leading: 1.5rem;

  --cp-weight-regular: 400;
  --cp-weight-medium: 500;
  --cp-weight-bold: 700;
}