/* Basic reset */

* {
    margin: 0;
    padding: 0;
  }
  
  *,
  *:before,
  *:after {
    box-sizing: border-box;
    font-weight: normal;
    font-family: sans-serif;
  }
  
  body,
  html {
    height: 100%;
  }
  
  body {
    /* Centering content for demo purposes */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-4);
    /* Global styles */
    background-color: var(--color-blue-100);
  }
  
  /* Design system with CSS custom properties */
  
  /*
    - Colors
    - Spacings
    - Font sizes
    - Radii
    - Borders
    - Shadows
    - Utilities
    (- Transitions)
  */
  
  :root {
    /* Blues */
    --color-blue-100: #f5faff;
    --color-blue-200: #b8dcff;
    --color-blue-300: #7ab8ff;
    --color-blue-400: #3d90ff;
    --color-blue-500: #0064fe;
    --color-blue-600: #0046d1;
    --color-blue-700: #002ba3;
    --color-blue-800: #001575;
    --color-blue-900: #000647;
  
    /* Greens */
    --color-green-100: #f0fcf5;
    --color-green-200: #b4eece;
    --color-green-300: #78e0a7;
    --color-green-400: #3cd180;
    --color-green-500: #00c159;
    --color-green-600: #009645;
    --color-green-700: #006a31;
    --color-green-800: #003f1d;
    --color-green-900: #001309;
  
    /* Grays */
    --color-gray-100: #f3f5f6;
    --color-gray-200: #d0d8dd;
    --color-gray-300: #aebac2;
    --color-gray-400: #8d9ca7;
    --color-gray-500: #6c7d8b;
    --color-gray-600: #576674;
    --color-gray-700: #424e5c;
    --color-gray-800: #2e3843;
    --color-gray-900: #1c212a;
  
    /* Neutrals */
    --color-white: white;
    --color-black: black;
  
    /* Misc */
    --color-border: var(--color-gray-200);
  
    /* Spacing */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
  
    /* Font sizes */
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
  
    /* Border radius */
    --radius: 6px;
    --round: 1000px;
  
    /* Borders */
    --border: 1px solid var(--color-border);
  
    /* Shadows */
    --shadow: 0px 2px 8px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-large: 0px 5px 18px rgba(0, 0, 0, 0.1),
      0px 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-focus: 0 0 0 var(--space-1) var(--color-blue-200);
  
    /* Transition curves */
    --transition-curve: cubic-bezier(0.2, 0.7, 0.3, 1);
    --transition-curve-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
    /* Transition speeds */
    --transition-speed: 0.25s;
    --transition-speed-slow: 1s;
  
    /* Transition */
    --transition: all var(--transition-speed) var(--transition-curve);
    --transition-bounce: all var(--transition-speed)
      var(--transition-curve-bounce);
  
    /* Opacities */
    --opacity-25: 0.25;
    --opacity-50: 0.5;
    --opacity-75: 0.75;
    --opacity-100: 1;
  }
  
  .container {
    width: var(--width-container);
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-8);
    border: var(--border);
    background-color: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .input-row {
    display: flex;
    padding: var(--space-3) 0;
    border-bottom: var(--border);
  }
  .input-row:last-child {
    border-bottom: 0;
  }
  .title {
    margin-right: var(--space-8);
  }
  .label {
    margin-bottom: var(--space-1);
    font-weight: bold;
  }
  .description {
    color: var(--color-gray-600);
  }
  .input {
    display: flex;
    align-items: center;
    margin-left: auto;
  }
  button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--space-12);
    height: var(--space-12);
    border: 1px solid var(--color-blue-500);
    border-radius: var(--round);
    background-color: var(--color-white);
  }
  button:hover {
    background-color: var(--color-blue-200);
    cursor: pointer;
  }
  button:focus {
    outline: none;
    box-shadow: var(--shadow-focus);
  }
  button[disabled] {
    opacity: var(--opacity-50);
    pointer-events: none;
  }
  button:active {
    background-color: var(--color-blue-300);
  }
  
  .number {
    font-size: var(--text-lg);
    min-width: var(--space-12);
    text-align: center;
  }
  .icon {
    user-select: none;
  }
  .dim {
    color: var(--color-gray-400);
  }