/* ===========================================
   Theme Configuration
   Change colors, fonts, spacing here to customize the look.
   Based on Pico CSS custom properties.
   =========================================== */

/* Light color scheme (match Pico's specificity) */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  /* Primary Color - Green theme */
  --pico-primary: #14854f;
  --pico-primary-background: #14854f;
  --pico-primary-border: #14854f;
  --pico-primary-underline: rgba(20, 133, 79, 0.5);
  --pico-primary-hover: #0f6e41;
  --pico-primary-hover-background: #0f6e41;
  --pico-primary-hover-border: #0f6e41;
  --pico-primary-focus: rgba(20, 133, 79, 0.25);
  --pico-primary-inverse: #fff;
}

:root {
  /* Semantic Colors */
  --pico-success-color: #28bd14;      /* Success/Insert */
  --pico-delete-color: #d43939;      /* Error/Delete */
  --pico-warning-color: #f59e0b;  /* Warning/Alert */
  --pico-info-color: #3b82f6;      /* Info/Neutral */

  /* App-specific semantic aliases */
  --color-success: var(--pico-success-color);
  --color-error: var(--pico-delete-color);
  --color-warning: var(--pico-warning-color);
  --color-info: var(--pico-info-color);
  --color-primary: var(--pico-primary);

  /* Typography */
  --pico-font-family-sans-serif: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif;
  --pico-font-family-monospace: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
  
  /* Border Radius */
  --pico-border-radius: 0.375rem;

  /* Spacing */
  --grid-gutter: 1.5rem;
}

/* Dark color scheme (Auto - respects user's device settings) */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-primary: #2dd36f;
    --pico-primary-background: #2dd36f;
    --pico-primary-border: #2dd36f;
    --pico-primary-underline: rgba(45, 211, 111, 0.5);
    --pico-primary-hover: #50e88a;
    --pico-primary-hover-background: #50e88a;
    --pico-primary-hover-border: #50e88a;
    --pico-primary-focus: rgba(45, 211, 111, 0.25);
    --pico-primary-inverse: #000;
  }
}

/* Dark color scheme (Forced with data-theme="dark") */
[data-theme="dark"] {
  --pico-primary: #2dd36f;
  --pico-primary-background: #2dd36f;
  --pico-primary-border: #2dd36f;
  --pico-primary-underline: rgba(45, 211, 111, 0.5);
  --pico-primary-hover: #50e88a;
  --pico-primary-hover-background: #50e88a;
  --pico-primary-hover-border: #50e88a;
  --pico-primary-focus: rgba(45, 211, 111, 0.25);
  --pico-primary-inverse: #000;
}

/* ===========================================
   Color Presets (uncomment to use)
   Replace the Green theme section above with one of these.
   =========================================== */

/* Blue Theme
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --pico-primary: #3b82f6;
  --pico-primary-background: #3b82f6;
  --pico-primary-border: #3b82f6;
  --pico-primary-underline: rgba(59, 130, 246, 0.5);
  --pico-primary-hover: #2563eb;
  --pico-primary-hover-background: #2563eb;
  --pico-primary-hover-border: #2563eb;
  --pico-primary-focus: rgba(59, 130, 246, 0.25);
  --pico-primary-inverse: #fff;
}
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-primary: #60a5fa;
    --pico-primary-background: #60a5fa;
    --pico-primary-border: #60a5fa;
    --pico-primary-underline: rgba(96, 165, 250, 0.5);
    --pico-primary-hover: #93c5fd;
    --pico-primary-hover-background: #93c5fd;
    --pico-primary-hover-border: #93c5fd;
    --pico-primary-focus: rgba(96, 165, 250, 0.25);
    --pico-primary-inverse: #000;
  }
}
[data-theme="dark"] {
  --pico-primary: #60a5fa;
  --pico-primary-background: #60a5fa;
  --pico-primary-border: #60a5fa;
  --pico-primary-underline: rgba(96, 165, 250, 0.5);
  --pico-primary-hover: #93c5fd;
  --pico-primary-hover-background: #93c5fd;
  --pico-primary-hover-border: #93c5fd;
  --pico-primary-focus: rgba(96, 165, 250, 0.25);
  --pico-primary-inverse: #000;
}
*/

/* Purple Theme
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --pico-primary: #8b5cf6;
  --pico-primary-background: #8b5cf6;
  --pico-primary-border: #8b5cf6;
  --pico-primary-underline: rgba(139, 92, 246, 0.5);
  --pico-primary-hover: #7c3aed;
  --pico-primary-hover-background: #7c3aed;
  --pico-primary-hover-border: #7c3aed;
  --pico-primary-focus: rgba(139, 92, 246, 0.25);
  --pico-primary-inverse: #fff;
}
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-primary: #a78bfa;
    --pico-primary-background: #a78bfa;
    --pico-primary-border: #a78bfa;
    --pico-primary-underline: rgba(167, 139, 250, 0.5);
    --pico-primary-hover: #c4b5fd;
    --pico-primary-hover-background: #c4b5fd;
    --pico-primary-hover-border: #c4b5fd;
    --pico-primary-focus: rgba(167, 139, 250, 0.25);
    --pico-primary-inverse: #000;
  }
}
[data-theme="dark"] {
  --pico-primary: #a78bfa;
  --pico-primary-background: #a78bfa;
  --pico-primary-border: #a78bfa;
  --pico-primary-underline: rgba(167, 139, 250, 0.5);
  --pico-primary-hover: #c4b5fd;
  --pico-primary-hover-background: #c4b5fd;
  --pico-primary-hover-border: #c4b5fd;
  --pico-primary-focus: rgba(167, 139, 250, 0.25);
  --pico-primary-inverse: #000;
}
*/

/* Teal Theme
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --pico-primary: #14b8a6;
  --pico-primary-background: #14b8a6;
  --pico-primary-border: #14b8a6;
  --pico-primary-underline: rgba(20, 184, 166, 0.5);
  --pico-primary-hover: #0d9488;
  --pico-primary-hover-background: #0d9488;
  --pico-primary-hover-border: #0d9488;
  --pico-primary-focus: rgba(20, 184, 166, 0.25);
  --pico-primary-inverse: #fff;
}
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-primary: #2dd4bf;
    --pico-primary-background: #2dd4bf;
    --pico-primary-border: #2dd4bf;
    --pico-primary-underline: rgba(45, 212, 191, 0.5);
    --pico-primary-hover: #5eead4;
    --pico-primary-hover-background: #5eead4;
    --pico-primary-hover-border: #5eead4;
    --pico-primary-focus: rgba(45, 212, 191, 0.25);
    --pico-primary-inverse: #000;
  }
}
[data-theme="dark"] {
  --pico-primary: #2dd4bf;
  --pico-primary-background: #2dd4bf;
  --pico-primary-border: #2dd4bf;
  --pico-primary-underline: rgba(45, 212, 191, 0.5);
  --pico-primary-hover: #5eead4;
  --pico-primary-hover-background: #5eead4;
  --pico-primary-hover-border: #5eead4;
  --pico-primary-focus: rgba(45, 212, 191, 0.25);
  --pico-primary-inverse: #000;
}
*/