:root {
  /* Spacing */
  --standard-padding: 0.5rem;
  --half-padding: calc (0.5 * var(--standard-padding));
  --double-padding: calc(2 * var(--standard-padding));
  --quad-padding: calc(4 * var(--standard-padding));
  --octo-padding: calc(8 * var(--standard-padding));

  /* Layout */
  --border-radius: 0.2rem;

  /* Typography */
  --font-size-base: 1rem;
  --font-size-small: 0.7rem;
  --font-size-tiny: 0.6rem;
  --font-size-large: 1.5rem;

  /* Font Stacks */
  --font-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
  --font-classical: Optima, Candara, "Noto Sans", source-sans-pro, sans-serif;

  /* Colors */
  --color-body-copy: rgba(0, 0, 0, 0.847);
  --color-body-copy-negative: rgba(255, 255, 255, 0.87);
  --color-text-standard: rgba(45, 64, 72, 1);

  /* Status Colors */
  --color-danger: rgba(224, 34, 0, 1);
  --color-warn: rgba(255, 185, 46, 1);
  --color-success: rgba(66, 129, 14, 1);
  --color-info: rgba(0, 121, 173, 1);
  --color-neutral: rgba(79, 97, 105, 1);
  --color-accent: rgba(124, 18, 165, 1);
  --color-accent-alternate: rgba(155, 50, 200, 1);
  --color-accent-shade: rgba(68, 0, 97, 1);
  --color-disabled: rgba(174, 184, 188, 1);
  --color-border: rgba(106, 122, 129, 1);
  --color-blank: rgba(255, 255, 255, 1);

  /* Status Shadow Colors */
  --color-danger-shadow: rgba(224, 34, 0, 0.15);
  --color-warn-shadow: rgba(255, 185, 46, 0.15);
  --color-success-shadow: rgba(66, 129, 14, 0.15);
  --color-info-shadow: rgba(0, 121, 173, 0.65);
  --color-neutral-shadow: rgba(79, 97, 105, 0.15);
  --color-accent-shadow: rgba(124, 18, 165, 0.15);
  --color-accent-alternate-shadow: rgba(155, 50, 200, 0.15);
  --color-accent-shade-shadow: rgba(68, 0, 97, 0.15);
  --color-disabled-shadow: rgba(174, 184, 188, 0.15);
  --color-border-shadow: rgba(106, 122, 129, 0.15);
  --color-blank-shadow: rgba(255, 255, 255, 0.15);

  /* Status Background Colors */
  --color-danger-tint: rgba(255, 242, 240, 1);
  --color-warn-tint: rgba(255, 242, 214, 1);
  --color-success-tint: rgba(238, 252, 227, 1);
  --color-info-tint: rgba(230, 247, 255, 1);
  --color-neutral-tint: rgba(241, 246, 248, 1);
  --color-accent-tint: rgba(250, 240, 255, 1);
  --color-disabled-tint: rgba(203, 212, 216, 1);

  --color-project: rgba(40, 167, 69, 1);
  --color-project-tint: rgba(40, 167, 69, 0.1);
  --color-project-shadow: rgba(40, 167, 69, 0.15);

  /* Common Transitions */
  --transition-quick: 0.1s ease;
  --transition-standard: 0.2s ease;

  /* Common Box Shadows */
  --shadow-standard: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Colors for dark mode */
    --color-body-copy: rgba(255, 255, 255, 0.87);
    --color-body-copy-negative: rgba(255, 255, 255, 0.87);
    --color-text-standard: rgba(220, 228, 232, 1);

    /* Status Colors - darker background needs brighter colors */
    --color-danger: rgba(255, 99, 71, 1);
    --color-warn: rgba(255, 204, 0, 1);
    --color-success: rgba(100, 190, 50, 1);
    --color-info: rgba(51, 181, 229, 1);
    --color-neutral: rgba(180, 190, 195, 1);
    --color-accent: rgba(187, 134, 252, 1);
    --color-accent-alternate: rgba(200, 155, 255, 1);
    --color-accent-shade: rgba(150, 100, 200, 1);
    --color-disabled: rgba(128, 128, 128, 1);
    --color-border: rgba(75, 85, 90, 1);
    --color-blank: rgba(18, 18, 18, 1);

    /* Status Shadow Colors - dark mode */
    --color-danger-shadow: rgba(255, 99, 71, 0.15);
    --color-warn-shadow: rgba(255, 204, 0, 0.15);
    --color-success-shadow: rgba(100, 190, 50, 0.15);
    --color-info-shadow: rgba(51, 181, 229, 0.15);
    --color-neutral-shadow: rgba(180, 190, 195, 0.15);
    --color-accent-shadow: rgba(187, 134, 252, 0.15);
    --color-accent-alternate-shadow: rgba(200, 155, 255, 0.15);
    --color-accent-shade-shadow: rgba(150, 100, 200, 0.15);
    --color-disabled-shadow: rgba(128, 128, 128, 0.15);
    --color-border-shadow: rgba(75, 85, 90, 0.15);
    --color-blank-shadow: rgba(18, 18, 18, 0.15);

    /* Status Background Colors - darker, more muted backgrounds */
    --color-danger-tint: rgba(255, 99, 71, 0.2);
    --color-warn-tint: rgba(255, 204, 0, 0.2);
    --color-success-tint: rgba(100, 190, 50, 0.2);
    --color-info-tint: rgba(51, 181, 229, 0.2);
    --color-neutral-tint: rgba(180, 190, 195, 0.2);
    --color-accent-tint: rgba(187, 134, 252, 0.2);
    --color-disabled-tint: rgba(128, 128, 128, 0.2);

    --color-project: rgba(40, 167, 69, 1);
    --color-project-tint: rgba(40, 167, 69, 0.1);
    --color-project-shadow: rgba(40, 167, 69, 0.15);
  }

  /* Base dark mode styles */
  body,
  html {
    color-scheme: dark;
    background-color: var(--color-blank);
  }

  /* Dark mode specific adjustments */
  input,
  textarea {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-body-copy);
  }

  .new-todo {
    border-color: var(--color-info);
  }

  .todo {
    background-color: rgba(255, 255, 255, 0.05);
  }

  .drag-handle {
    background: rgba(255, 255, 255, 0.1);
  }

  .drag-handle:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  /* button {
        background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%);
    } */

  nav .tab.current {
    background-color: var(--color-info);
    color: var(--color-body-copy);
  }
}

/* Add smooth transitions for color changes */
:root {
  transition: background-color 0.3s ease, color 0.3s ease;
}