/* Import Nimbus Design System Theme */
/**
 * Nimbus Design System - CSS Theme
 * Auto-generated from Figma Design Tokens
 *
 * This file contains all design tokens as CSS custom properties.
 * The theme automatically adapts to light/dark mode using prefers-color-scheme.
 */
:root {
  color-scheme: light dark;
}
/* Light Theme (Default) */
:root {
  /* Backgrounds - Surface */
  --bg-surface-primary: #FFFFFF;
  --bg-surface-secondary: #EDEFF2;
  --bg-surface-invert: #FFFFFF;
  --bg-surface-invert-2: #EDEFF2;
  --bg-surface-brand: #403456;

  /* Backgrounds - Buttons */
  --bg-button-primary: #403456;
  --bg-button-secondary: #EDEFF2;
  --bg-button-ghost: #FFFFFF;
  --bg-button-border: #D7DAE0;
  --bg-button-disable: #EDEFF2;

  /* Backgrounds - Chips */
  --bg-chip-filled: #EDEFF2;
  --bg-chip-border: #EDEFF2;

  /* Backgrounds - Content Switcher */
  --bg-cs-bg: #EDEFF2;
  --bg-cs-highlight: #FFFFFF;

  /* Backgrounds - Footer */
  --bg-footer-surface-primary: #F6F7F9;
  --bg-footer-border-selected: #232933;

  /* Borders */
  --border-20: #D7DAE0;
  --border-40: #D7DAE0;
  --border-60: #BDC4D1;
  --border-100: #232933;
  --border-brand: #2D1B3F;

  /* Text Colors */
  --text-title: #232933;
  --text-paragraph: #5C6575;
  --text-disable: #BDC4D1;
  --text-invert: #FFFFFF;
  --text-brand: #2D1B3F;

  /* Icon Colors */
  --icon-hero: #171B27;
  --icon-secondary: #5C6575;
  --icon-disable: #828B99;
  --icon-brand: #675D78;
}
/* Dark Theme */
@media (prefers-color-scheme: dark) {
  :root {
    /* Backgrounds - Surface */
    --bg-surface-primary: #232933;
    --bg-surface-secondary: #303640;
    --bg-surface-invert: #464E5C;
    --bg-surface-invert-2: #5C6575;
    --bg-surface-brand: #D8D6DD;

    /* Backgrounds - Buttons */
    --bg-button-primary: #D8D6DD;
    --bg-button-secondary: #303640;
    --bg-button-ghost: #232933;
    --bg-button-border: #464E5C;
    --bg-button-disable: #303640;

    /* Backgrounds - Chips */
    --bg-chip-filled: #303640;
    --bg-chip-border: #303640;

    /* Backgrounds - Content Switcher */
    --bg-cs-bg: #464E5C;
    --bg-cs-highlight: #303640;

    /* Backgrounds - Footer */
    --bg-footer-surface-primary: #303640;
    --bg-footer-border-selected: #BDC4D1;

    /* Borders */
    --border-20: #5C6575;
    --border-40: #464E5C;
    --border-60: #5C6575;
    --border-100: #F6F7F9;
    --border-brand: #675D78;

    /* Text Colors */
    --text-title: #FFFFFF;
    --text-paragraph: #D7DAE0;
    --text-disable: #5C6575;
    --text-invert: #232933;
    --text-brand: #2D1B3F;

    /* Icon Colors */
    --icon-hero: #FFFFFF;
    --icon-secondary: #D7DAE0;
    --icon-disable: #BDC4D1;
    --icon-brand: #675D78;
  }
}
/* Force Light Theme */
[data-theme="light"] {
  color-scheme: light;

  /* Backgrounds - Surface */
  --bg-surface-primary: #FFFFFF;
  --bg-surface-secondary: #EDEFF2;
  --bg-surface-invert: #FFFFFF;
  --bg-surface-invert-2: #EDEFF2;
  --bg-surface-brand: #403456;

  /* Backgrounds - Buttons */
  --bg-button-primary: #403456;
  --bg-button-secondary: #EDEFF2;
  --bg-button-ghost: #FFFFFF;
  --bg-button-border: #D7DAE0;
  --bg-button-disable: #EDEFF2;

  /* Backgrounds - Chips */
  --bg-chip-filled: #EDEFF2;
  --bg-chip-border: #EDEFF2;

  /* Backgrounds - Content Switcher */
  --bg-cs-bg: #EDEFF2;
  --bg-cs-highlight: #FFFFFF;

  /* Backgrounds - Footer */
  --bg-footer-surface-primary: #F6F7F9;
  --bg-footer-border-selected: #232933;

  /* Borders */
  --border-20: #D7DAE0;
  --border-40: #D7DAE0;
  --border-60: #BDC4D1;
  --border-100: #232933;
  --border-brand: #2D1B3F;

  /* Text Colors */
  --text-title: #232933;
  --text-paragraph: #5C6575;
  --text-disable: #BDC4D1;
  --text-invert: #FFFFFF;
  --text-brand: #2D1B3F;

  /* Icon Colors */
  --icon-hero: #171B27;
  --icon-secondary: #5C6575;
  --icon-disable: #828B99;
  --icon-brand: #675D78;
}
/* Force Dark Theme */
[data-theme="dark"] {
  color-scheme: dark;

  /* Backgrounds - Surface */
  --bg-surface-primary: #232933;
  --bg-surface-secondary: #303640;
  --bg-surface-invert: #464E5C;
  --bg-surface-invert-2: #5C6575;
  --bg-surface-brand: #D8D6DD;

  /* Backgrounds - Buttons */
  --bg-button-primary: #D8D6DD;
  --bg-button-secondary: #303640;
  --bg-button-ghost: #232933;
  --bg-button-border: #464E5C;
  --bg-button-disable: #303640;

  /* Backgrounds - Chips */
  --bg-chip-filled: #303640;
  --bg-chip-border: #303640;

  /* Backgrounds - Content Switcher */
  --bg-cs-bg: #464E5C;
  --bg-cs-highlight: #303640;

  /* Backgrounds - Footer */
  --bg-footer-surface-primary: #303640;
  --bg-footer-border-selected: #BDC4D1;

  /* Borders */
  --border-20: #5C6575;
  --border-40: #464E5C;
  --border-60: #5C6575;
  --border-100: #F6F7F9;
  --border-brand: #675D78;

  /* Text Colors */
  --text-title: #FFFFFF;
  --text-paragraph: #D7DAE0;
  --text-disable: #5C6575;
  --text-invert: #232933;
  --text-brand: #2D1B3F;

  /* Icon Colors */
  --icon-hero: #FFFFFF;
  --icon-secondary: #D7DAE0;
  --icon-disable: #BDC4D1;
  --icon-brand: #675D78;
}
:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color: var(--text-paragraph);
  background-color: var(--bg-surface-primary);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}
h1 {
  font-size: 3.2em;
  line-height: 1.1;
  color: var(--text-title);
}