/**
 * Hiisi CSS Variables Reference
 * =============================
 *
 * This file contains all CSS custom properties (variables) from:
 * - Pico CSS v2 (--pico-*)
 * - Shoelace v2.18.0 (--sl-*)
 *
 * Uncomment and modify any variable to customize your theme.
 * Import this file AFTER the library stylesheets to override defaults.
 *
 * Usage in Rust (src/views.rs):
 *   link href="/static/css/variables.css" rel="stylesheet";
 *
 * Usage in Common Lisp (cl/view/base.lisp):
 *   (link :rel "stylesheet" :href "/static/css/variables.css")
 */

:root {
  /* ==========================================================================
     PICO CSS VARIABLES
     ========================================================================== */

  /* --------------------------------------------------------------------------
     Typography
     -------------------------------------------------------------------------- */
  /* --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
  /* --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji); */
  /* --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji); */
  /* --pico-font-family: var(--pico-font-family-sans-serif); */
  /* --pico-font-size: 100%; */
  /* --pico-font-weight: 400; */
  /* --pico-line-height: 1.5; */
  /* --pico-text-underline-offset: 0.1rem; */

  /* --------------------------------------------------------------------------
     Spacing & Layout
     -------------------------------------------------------------------------- */
  /* --pico-spacing: 1rem; */
  /* --pico-typography-spacing-vertical: 1rem; */
  /* --pico-block-spacing-vertical: 1rem; */
  /* --pico-block-spacing-horizontal: 1rem; */
  /* --pico-grid-column-gap: 1rem; */
  /* --pico-grid-row-gap: 1rem; */

  /* --------------------------------------------------------------------------
     Form Element Spacing
     -------------------------------------------------------------------------- */
  /* --pico-form-element-spacing-vertical: 0.75rem; */
  /* --pico-form-element-spacing-horizontal: 1rem; */

  /* --------------------------------------------------------------------------
     Navigation Spacing
     -------------------------------------------------------------------------- */
  /* --pico-nav-element-spacing-vertical: 1rem; */
  /* --pico-nav-element-spacing-horizontal: 0.5rem; */
  /* --pico-nav-link-spacing-vertical: 0.5rem; */
  /* --pico-nav-link-spacing-horizontal: 0.5rem; */
  /* --pico-nav-breadcrumb-divider: ">"; */

  /* --------------------------------------------------------------------------
     Borders & Radius
     -------------------------------------------------------------------------- */
  /* --pico-border-radius: 0.25rem; */
  /* --pico-border-width: 0.0625rem; */
  /* --pico-outline-width: 0.125rem; */

  /* --------------------------------------------------------------------------
     Transitions
     -------------------------------------------------------------------------- */
  /* --pico-transition: 0.2s ease-in-out; */

  /* --------------------------------------------------------------------------
     Background & Text Colors (Light Theme)
     -------------------------------------------------------------------------- */
  /* --pico-background-color: #fff; */
  /* --pico-color: #373c44; */
  /* --pico-text-selection-color: rgba(1, 170, 255, 0.25); */
  /* --pico-muted-color: #646b79; */
  /* --pico-muted-border-color: #e7eaf0; */

  /* --------------------------------------------------------------------------
     Heading Colors
     -------------------------------------------------------------------------- */
  /* --pico-h1-color: #2d3138; */
  /* --pico-h2-color: #373c44; */
  /* --pico-h3-color: #424851; */
  /* --pico-h4-color: #4d545f; */
  /* --pico-h5-color: #646b79; */
  /* --pico-h6-color: #7b8495; */

  /* --------------------------------------------------------------------------
     Primary Colors
     -------------------------------------------------------------------------- */
  /* --pico-primary: #0172ad; */
  /* --pico-primary-background: #0172ad; */
  /* --pico-primary-border: #0172ad; */
  /* --pico-primary-underline: rgba(1, 114, 173, 0.5); */
  /* --pico-primary-hover: #01608f; */
  /* --pico-primary-hover-background: #016897; */
  /* --pico-primary-hover-border: #016897; */
  /* --pico-primary-hover-underline: #01608f; */
  /* --pico-primary-focus: rgba(1, 114, 173, 0.5); */
  /* --pico-primary-inverse: #fff; */

  /* --------------------------------------------------------------------------
     Secondary Colors
     -------------------------------------------------------------------------- */
  /* --pico-secondary: #5d6b89; */
  /* --pico-secondary-background: #5d6b89; */
  /* --pico-secondary-border: #5d6b89; */
  /* --pico-secondary-underline: rgba(93, 107, 137, 0.5); */
  /* --pico-secondary-hover: #4c5871; */
  /* --pico-secondary-hover-background: #556078; */
  /* --pico-secondary-hover-border: #556078; */
  /* --pico-secondary-hover-underline: #4c5871; */
  /* --pico-secondary-focus: rgba(93, 107, 137, 0.5); */
  /* --pico-secondary-inverse: #fff; */

  /* --------------------------------------------------------------------------
     Contrast Colors
     -------------------------------------------------------------------------- */
  /* --pico-contrast: #181c25; */
  /* --pico-contrast-background: #181c25; */
  /* --pico-contrast-border: #181c25; */
  /* --pico-contrast-underline: rgba(24, 28, 37, 0.5); */
  /* --pico-contrast-hover: #000; */
  /* --pico-contrast-hover-background: #24292f; */
  /* --pico-contrast-hover-border: #24292f; */
  /* --pico-contrast-hover-underline: #000; */
  /* --pico-contrast-focus: rgba(24, 28, 37, 0.5); */
  /* --pico-contrast-inverse: #fff; */

  /* --------------------------------------------------------------------------
     Text Formatting Colors
     -------------------------------------------------------------------------- */
  /* --pico-mark-background-color: #fde7c5; */
  /* --pico-mark-color: #0f1114; */
  /* --pico-ins-color: #0b6125; */
  /* --pico-del-color: #a3171d; */

  /* --------------------------------------------------------------------------
     Code Block Colors
     -------------------------------------------------------------------------- */
  /* --pico-code-background-color: #f3f5f7; */
  /* --pico-code-color: #646b79; */
  /* --pico-code-kbd-background-color: #e7eaf0; */
  /* --pico-code-kbd-color: #454d5a; */

  /* --------------------------------------------------------------------------
     Blockquote Colors
     -------------------------------------------------------------------------- */
  /* --pico-blockquote-border-color: #e7eaf0; */
  /* --pico-blockquote-footer-color: #646b79; */

  /* --------------------------------------------------------------------------
     Form Element Colors
     -------------------------------------------------------------------------- */
  /* --pico-form-element-background-color: #fff; */
  /* --pico-form-element-selected-background-color: #e7eaf0; */
  /* --pico-form-element-border-color: #cfd5e2; */
  /* --pico-form-element-color: #373c44; */
  /* --pico-form-element-placeholder-color: #646b79; */
  /* --pico-form-element-active-background-color: #fff; */
  /* --pico-form-element-active-border-color: #0172ad; */
  /* --pico-form-element-focus-color: rgba(1, 114, 173, 0.25); */
  /* --pico-form-element-disabled-opacity: 0.5; */

  /* --------------------------------------------------------------------------
     Form Validation Colors
     -------------------------------------------------------------------------- */
  /* --pico-form-element-invalid-border-color: #a3171d; */
  /* --pico-form-element-invalid-active-border-color: #c62828; */
  /* --pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25); */
  /* --pico-form-element-valid-border-color: #0b6125; */
  /* --pico-form-element-valid-active-border-color: #138a36; */
  /* --pico-form-element-valid-focus-color: rgba(11, 97, 37, 0.25); */

  /* --------------------------------------------------------------------------
     Switch/Toggle Colors
     -------------------------------------------------------------------------- */
  /* --pico-switch-background-color: #cfd5e2; */
  /* --pico-switch-checked-background-color: #0172ad; */
  /* --pico-switch-color: #fff; */
  /* --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0); */

  /* --------------------------------------------------------------------------
     Range Slider Colors
     -------------------------------------------------------------------------- */
  /* --pico-range-border-color: #cfd5e2; */
  /* --pico-range-active-border-color: #0172ad; */
  /* --pico-range-thumb-border-color: #0172ad; */
  /* --pico-range-thumb-color: #0172ad; */
  /* --pico-range-thumb-active-color: #016897; */

  /* --------------------------------------------------------------------------
     Table Colors
     -------------------------------------------------------------------------- */
  /* --pico-table-border-color: #e7eaf0; */
  /* --pico-table-row-stripped-background-color: rgba(115, 130, 161, 0.0375); */

  /* --------------------------------------------------------------------------
     Accordion Colors
     -------------------------------------------------------------------------- */
  /* --pico-accordion-border-color: #e7eaf0; */
  /* --pico-accordion-active-summary-color: #0172ad; */
  /* --pico-accordion-close-summary-color: #373c44; */
  /* --pico-accordion-open-summary-color: #646b79; */

  /* --------------------------------------------------------------------------
     Card Colors
     -------------------------------------------------------------------------- */
  /* --pico-card-background-color: #fff; */
  /* --pico-card-border-color: #e7eaf0; */
  /* --pico-card-box-shadow: 0 0.125rem 1rem rgba(24, 28, 37, 0.04), 0 0.125rem 2rem rgba(24, 28, 37, 0.08), 0 0 0 0.0625rem rgba(24, 28, 37, 0.024); */
  /* --pico-card-sectioning-background-color: #f7f8f9; */

  /* --------------------------------------------------------------------------
     Dropdown Colors
     -------------------------------------------------------------------------- */
  /* --pico-dropdown-background-color: #fff; */
  /* --pico-dropdown-border-color: #e7eaf0; */
  /* --pico-dropdown-box-shadow: 0 0.125rem 1rem rgba(24, 28, 37, 0.04), 0 0.125rem 2rem rgba(24, 28, 37, 0.08), 0 0 0 0.0625rem rgba(24, 28, 37, 0.024); */
  /* --pico-dropdown-color: #373c44; */
  /* --pico-dropdown-hover-background-color: #e7eaf0; */

  /* --------------------------------------------------------------------------
     Modal Colors
     -------------------------------------------------------------------------- */
  /* --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); */
  /* --pico-modal-overlay-backdrop-filter: blur(0.25rem); */

  /* --------------------------------------------------------------------------
     Progress Bar Colors
     -------------------------------------------------------------------------- */
  /* --pico-progress-background-color: #e7eaf0; */
  /* --pico-progress-color: #0172ad; */

  /* --------------------------------------------------------------------------
     Tooltip Colors
     -------------------------------------------------------------------------- */
  /* --pico-tooltip-background-color: #181c25; */
  /* --pico-tooltip-color: #fff; */

  /* --------------------------------------------------------------------------
     Loading & UI Effects
     -------------------------------------------------------------------------- */
  /* --pico-loading-spinner-opacity: 0.5; */

  /* --------------------------------------------------------------------------
     Box Shadows
     -------------------------------------------------------------------------- */
  /* --pico-box-shadow: 0 0.125rem 1rem rgba(24, 28, 37, 0.04), 0 0.125rem 2rem rgba(24, 28, 37, 0.08), 0 0 0 0.0625rem rgba(24, 28, 37, 0.024); */
  /* --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); */
  /* --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); */
  /* --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0); */
  /* --pico-group-box-shadow-focus-with-button: 0 0 0 0.1875rem var(--pico-primary-focus); */
  /* --pico-group-box-shadow-focus-with-input: 0 0 0 0.125rem var(--pico-form-element-focus-color); */

  /* --------------------------------------------------------------------------
     Icons (SVG data URLs - usually don't need to modify)
     -------------------------------------------------------------------------- */
  /* --pico-icon-checkbox: url("data:image/svg+xml,..."); */
  /* --pico-icon-minus: url("data:image/svg+xml,..."); */
  /* --pico-icon-chevron: url("data:image/svg+xml,..."); */
  /* --pico-icon-date: url("data:image/svg+xml,..."); */
  /* --pico-icon-time: url("data:image/svg+xml,..."); */
  /* --pico-icon-search: url("data:image/svg+xml,..."); */
  /* --pico-icon-close: url("data:image/svg+xml,..."); */
  /* --pico-icon-loading: url("data:image/svg+xml,..."); */
  /* --pico-icon-valid: url("data:image/svg+xml,..."); */
  /* --pico-icon-invalid: url("data:image/svg+xml,..."); */


  /* ==========================================================================
     SHOELACE VARIABLES
     ========================================================================== */

  /* --------------------------------------------------------------------------
     Typography - Font Families
     -------------------------------------------------------------------------- */
  /* --sl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
  /* --sl-font-serif: Georgia, "Times New Roman", serif; */
  /* --sl-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; */

  /* --------------------------------------------------------------------------
     Typography - Font Sizes
     -------------------------------------------------------------------------- */
  /* --sl-font-size-2x-small: 0.625rem;   /* 10px */
  /* --sl-font-size-x-small: 0.75rem;     /* 12px */
  /* --sl-font-size-small: 0.875rem;      /* 14px */
  /* --sl-font-size-medium: 1rem;         /* 16px */
  /* --sl-font-size-large: 1.25rem;       /* 20px */
  /* --sl-font-size-x-large: 1.5rem;      /* 24px */
  /* --sl-font-size-2x-large: 2.25rem;    /* 36px */
  /* --sl-font-size-3x-large: 3rem;       /* 48px */
  /* --sl-font-size-4x-large: 4.5rem;     /* 72px */

  /* --------------------------------------------------------------------------
     Typography - Font Weights
     -------------------------------------------------------------------------- */
  /* --sl-font-weight-light: 300; */
  /* --sl-font-weight-normal: 400; */
  /* --sl-font-weight-semibold: 500; */
  /* --sl-font-weight-bold: 700; */

  /* --------------------------------------------------------------------------
     Typography - Letter Spacing
     -------------------------------------------------------------------------- */
  /* --sl-letter-spacing-denser: -0.03em; */
  /* --sl-letter-spacing-dense: -0.015em; */
  /* --sl-letter-spacing-normal: normal; */
  /* --sl-letter-spacing-loose: 0.075em; */
  /* --sl-letter-spacing-looser: 0.15em; */

  /* --------------------------------------------------------------------------
     Typography - Line Heights
     -------------------------------------------------------------------------- */
  /* --sl-line-height-denser: 1; */
  /* --sl-line-height-dense: 1.4; */
  /* --sl-line-height-normal: 1.8; */
  /* --sl-line-height-loose: 2.2; */
  /* --sl-line-height-looser: 2.6; */

  /* --------------------------------------------------------------------------
     Spacing
     -------------------------------------------------------------------------- */
  /* --sl-spacing-3x-small: 0.125rem;     /* 2px */
  /* --sl-spacing-2x-small: 0.25rem;      /* 4px */
  /* --sl-spacing-x-small: 0.5rem;        /* 8px */
  /* --sl-spacing-small: 0.75rem;         /* 12px */
  /* --sl-spacing-medium: 1rem;           /* 16px */
  /* --sl-spacing-large: 1.25rem;         /* 20px */
  /* --sl-spacing-x-large: 1.75rem;       /* 28px */
  /* --sl-spacing-2x-large: 2.25rem;      /* 36px */
  /* --sl-spacing-3x-large: 3rem;         /* 48px */
  /* --sl-spacing-4x-large: 4.5rem;       /* 72px */

  /* --------------------------------------------------------------------------
     Border Radius
     -------------------------------------------------------------------------- */
  /* --sl-border-radius-small: 0.1875rem;  /* 3px */
  /* --sl-border-radius-medium: 0.25rem;   /* 4px */
  /* --sl-border-radius-large: 0.5rem;     /* 8px */
  /* --sl-border-radius-x-large: 1rem;     /* 16px */
  /* --sl-border-radius-circle: 50%; */
  /* --sl-border-radius-pill: 9999px; */

  /* --------------------------------------------------------------------------
     Shadows / Elevation
     -------------------------------------------------------------------------- */
  /* --sl-shadow-x-small: 0 1px 2px rgba(0, 0, 0, 0.18); */
  /* --sl-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.24); */
  /* --sl-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.24); */
  /* --sl-shadow-large: 0 2px 8px rgba(0, 0, 0, 0.24); */
  /* --sl-shadow-x-large: 0 4px 16px rgba(0, 0, 0, 0.24); */

  /* --------------------------------------------------------------------------
     Transitions
     -------------------------------------------------------------------------- */
  /* --sl-transition-x-slow: 1000ms; */
  /* --sl-transition-slow: 500ms; */
  /* --sl-transition-medium: 250ms; */
  /* --sl-transition-fast: 150ms; */
  /* --sl-transition-x-fast: 50ms; */

  /* --------------------------------------------------------------------------
     Z-Index Layers
     -------------------------------------------------------------------------- */
  /* --sl-z-index-drawer: 700; */
  /* --sl-z-index-dialog: 800; */
  /* --sl-z-index-dropdown: 900; */
  /* --sl-z-index-toast: 950; */
  /* --sl-z-index-tooltip: 1000; */

  /* --------------------------------------------------------------------------
     Primary Colors - Green theme matching Pico primary (#3fb68b)
     -------------------------------------------------------------------------- */
  --sl-color-primary-50: #ecfdf5;
  --sl-color-primary-100: #d1fae5;
  --sl-color-primary-200: #a7f3d0;
  --sl-color-primary-300: #6ed1ad;
  --sl-color-primary-400: #4cc99a;
  --sl-color-primary-500: #3fb68b;
  --sl-color-primary-600: #359f79;
  --sl-color-primary-700: #2d8a69;
  --sl-color-primary-800: #266e54;
  --sl-color-primary-900: #1f5a45;
  --sl-color-primary-950: #0f3326;

  /* --------------------------------------------------------------------------
     Success Colors (all shades 50-950)
     -------------------------------------------------------------------------- */
  /* --sl-color-success-50: #ecfdf5; */
  /* --sl-color-success-100: #d1fae5; */
  /* --sl-color-success-200: #a7f3d0; */
  /* --sl-color-success-300: #6ee7b7; */
  /* --sl-color-success-400: #34d399; */
  /* --sl-color-success-500: #10b981; */
  /* --sl-color-success-600: #059669; */
  /* --sl-color-success-700: #047857; */
  /* --sl-color-success-800: #065f46; */
  /* --sl-color-success-900: #064e3b; */
  /* --sl-color-success-950: #022c22; */

  /* --------------------------------------------------------------------------
     Warning Colors (all shades 50-950)
     -------------------------------------------------------------------------- */
  /* --sl-color-warning-50: #fffbeb; */
  /* --sl-color-warning-100: #fef3c7; */
  /* --sl-color-warning-200: #fde68a; */
  /* --sl-color-warning-300: #fcd34d; */
  /* --sl-color-warning-400: #fbbf24; */
  /* --sl-color-warning-500: #f59e0b; */
  /* --sl-color-warning-600: #d97706; */
  /* --sl-color-warning-700: #b45309; */
  /* --sl-color-warning-800: #92400e; */
  /* --sl-color-warning-900: #78350f; */
  /* --sl-color-warning-950: #451a03; */

  /* --------------------------------------------------------------------------
     Danger Colors (all shades 50-950)
     -------------------------------------------------------------------------- */
  --sl-color-danger-50: #fef2f2;
  --sl-color-danger-100: #fee2e2;
  --sl-color-danger-200: #fecaca;
  --sl-color-danger-300: #fca5a5;
  --sl-color-danger-400: #f87171;
  --sl-color-danger-500: #ef4444;
  --sl-color-danger-600: #dc2626;
  --sl-color-danger-700: #b91c1c;
  --sl-color-danger-800: #991b1b;
  --sl-color-danger-900: #7f1d1d;
  --sl-color-danger-950: #450a0a;

  /* --------------------------------------------------------------------------
     Neutral Colors (all shades 0-1000)
     -------------------------------------------------------------------------- */
  /* --sl-color-neutral-0: #ffffff; */
  /* --sl-color-neutral-50: #f9fafb; */
  /* --sl-color-neutral-100: #f3f4f6; */
  /* --sl-color-neutral-200: #e5e7eb; */
  /* --sl-color-neutral-300: #d1d5db; */
  /* --sl-color-neutral-400: #9ca3af; */
  /* --sl-color-neutral-500: #6b7280; */
  /* --sl-color-neutral-600: #4b5563; */
  /* --sl-color-neutral-700: #374151; */
  /* --sl-color-neutral-800: #1f2937; */
  /* --sl-color-neutral-900: #111827; */
  /* --sl-color-neutral-950: #030712; */
  /* --sl-color-neutral-1000: #000000; */

  /* --------------------------------------------------------------------------
     Focus Ring
     -------------------------------------------------------------------------- */
  /* --sl-focus-ring-color: var(--sl-color-primary-600); */
  /* --sl-focus-ring-style: solid; */
  /* --sl-focus-ring-width: 3px; */
  /* --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color); */
  /* --sl-focus-ring-offset: 1px; */

  /* --------------------------------------------------------------------------
     Button Sizes
     -------------------------------------------------------------------------- */
  /* --sl-button-font-size-small: var(--sl-font-size-x-small); */
  /* --sl-button-font-size-medium: var(--sl-font-size-small); */
  /* --sl-button-font-size-large: var(--sl-font-size-medium); */

  /* --------------------------------------------------------------------------
     Input Heights
     -------------------------------------------------------------------------- */
  /* --sl-input-height-small: 1.875rem;   /* 30px */
  /* --sl-input-height-medium: 2.5rem;    /* 40px */
  /* --sl-input-height-large: 3.125rem;   /* 50px */

  /* --------------------------------------------------------------------------
     Input Colors
     -------------------------------------------------------------------------- */
  /* --sl-input-background-color: var(--sl-color-neutral-0); */
  /* --sl-input-background-color-hover: var(--sl-input-background-color); */
  /* --sl-input-background-color-focus: var(--sl-input-background-color); */
  /* --sl-input-background-color-disabled: var(--sl-color-neutral-100); */
  /* --sl-input-border-color: var(--sl-color-neutral-300); */
  /* --sl-input-border-color-hover: var(--sl-color-neutral-400); */
  /* --sl-input-border-color-focus: var(--sl-color-primary-500); */
  /* --sl-input-border-color-disabled: var(--sl-color-neutral-300); */
  /* --sl-input-border-width: 1px; */
  /* --sl-input-color: var(--sl-color-neutral-700); */
  /* --sl-input-color-hover: var(--sl-color-neutral-700); */
  /* --sl-input-color-focus: var(--sl-color-neutral-700); */
  /* --sl-input-color-disabled: var(--sl-color-neutral-900); */
  /* --sl-input-icon-color: var(--sl-color-neutral-500); */
  /* --sl-input-icon-color-hover: var(--sl-color-neutral-600); */
  /* --sl-input-icon-color-focus: var(--sl-color-neutral-600); */
  /* --sl-input-placeholder-color: var(--sl-color-neutral-500); */
  /* --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600); */

  /* --------------------------------------------------------------------------
     Input Border Radius
     -------------------------------------------------------------------------- */
  /* --sl-input-border-radius-small: var(--sl-border-radius-medium); */
  /* --sl-input-border-radius-medium: var(--sl-border-radius-medium); */
  /* --sl-input-border-radius-large: var(--sl-border-radius-medium); */

  /* --------------------------------------------------------------------------
     Input Typography
     -------------------------------------------------------------------------- */
  /* --sl-input-font-family: var(--sl-font-sans); */
  /* --sl-input-font-weight: var(--sl-font-weight-normal); */
  /* --sl-input-font-size-small: var(--sl-font-size-small); */
  /* --sl-input-font-size-medium: var(--sl-font-size-medium); */
  /* --sl-input-font-size-large: var(--sl-font-size-large); */
  /* --sl-input-letter-spacing: var(--sl-letter-spacing-normal); */

  /* --------------------------------------------------------------------------
     Input Spacing
     -------------------------------------------------------------------------- */
  /* --sl-input-spacing-small: var(--sl-spacing-small); */
  /* --sl-input-spacing-medium: var(--sl-spacing-medium); */
  /* --sl-input-spacing-large: var(--sl-spacing-large); */

  /* --------------------------------------------------------------------------
     Input Focus Ring
     -------------------------------------------------------------------------- */
  /* --sl-input-focus-ring-color: rgba(var(--sl-color-primary-500), 0.33); */
  /* --sl-input-focus-ring-offset: 0; */

  /* --------------------------------------------------------------------------
     Input Required Indicator
     -------------------------------------------------------------------------- */
  /* --sl-input-required-content: "*"; */
  /* --sl-input-required-content-offset: -2px; */
  /* --sl-input-required-content-color: var(--sl-input-label-color); */

  /* --------------------------------------------------------------------------
     Filled Input Variant
     -------------------------------------------------------------------------- */
  /* --sl-input-filled-background-color: var(--sl-color-neutral-100); */
  /* --sl-input-filled-background-color-hover: var(--sl-color-neutral-100); */
  /* --sl-input-filled-background-color-focus: var(--sl-color-neutral-100); */
  /* --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100); */
  /* --sl-input-filled-color: var(--sl-color-neutral-800); */
  /* --sl-input-filled-color-hover: var(--sl-color-neutral-800); */
  /* --sl-input-filled-color-focus: var(--sl-color-neutral-700); */
  /* --sl-input-filled-color-disabled: var(--sl-color-neutral-800); */

  /* --------------------------------------------------------------------------
     Input Labels
     -------------------------------------------------------------------------- */
  /* --sl-input-label-font-size-small: var(--sl-font-size-small); */
  /* --sl-input-label-font-size-medium: var(--sl-font-size-medium); */
  /* --sl-input-label-font-size-large: var(--sl-font-size-large); */
  /* --sl-input-label-color: inherit; */

  /* --------------------------------------------------------------------------
     Input Help Text
     -------------------------------------------------------------------------- */
  /* --sl-input-help-text-font-size-small: var(--sl-font-size-x-small); */
  /* --sl-input-help-text-font-size-medium: var(--sl-font-size-small); */
  /* --sl-input-help-text-font-size-large: var(--sl-font-size-medium); */
  /* --sl-input-help-text-color: var(--sl-color-neutral-500); */

  /* --------------------------------------------------------------------------
     Toggle Sizes
     -------------------------------------------------------------------------- */
  /* --sl-toggle-size-small: 0.875rem;    /* 14px */
  /* --sl-toggle-size-medium: 1.125rem;   /* 18px */
  /* --sl-toggle-size-large: 1.375rem;    /* 22px */

  /* --------------------------------------------------------------------------
     Overlay
     -------------------------------------------------------------------------- */
  /* --sl-overlay-background-color: rgba(0, 0, 0, 0.43); */

  /* --------------------------------------------------------------------------
     Panels
     -------------------------------------------------------------------------- */
  /* --sl-panel-background-color: var(--sl-color-neutral-0); */
  /* --sl-panel-border-color: var(--sl-color-neutral-200); */
  /* --sl-panel-border-width: 1px; */

  /* --------------------------------------------------------------------------
     Tooltips
     -------------------------------------------------------------------------- */
  /* --sl-tooltip-border-radius: var(--sl-border-radius-medium); */
  /* --sl-tooltip-background-color: var(--sl-color-neutral-800); */
  /* --sl-tooltip-color: var(--sl-color-neutral-0); */
  /* --sl-tooltip-font-family: var(--sl-font-sans); */
  /* --sl-tooltip-font-weight: var(--sl-font-weight-normal); */
  /* --sl-tooltip-font-size: var(--sl-font-size-small); */
  /* --sl-tooltip-line-height: var(--sl-line-height-dense); */
  /* --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small); */
  /* --sl-tooltip-arrow-size: 6px; */


  /* ==========================================================================
     HIISI CUSTOM THEME
     ==========================================================================
     Accent: #3fb68b (GitHub Common Lisp color)
     Backgrounds: Solid black/white
  */

  /* --------------------------------------------------------------------------
     Primary Accent Color Palette (based on #3fb68b)
     -------------------------------------------------------------------------- */
  --hiisi-accent-50: #e8f7f2;
  --hiisi-accent-100: #c7ede0;
  --hiisi-accent-200: #9ee0c8;
  --hiisi-accent-300: #6ed1ad;
  --hiisi-accent-400: #3fb68b;
  --hiisi-accent-500: #359f79;
  --hiisi-accent-600: #2d8a69;
  --hiisi-accent-700: #247459;
  --hiisi-accent-800: #1c5e49;
  --hiisi-accent-900: #154939;
  --hiisi-accent-950: #0d2d23;

  /* --------------------------------------------------------------------------
     Shoelace - Primary Colors (theme-independent)
     -------------------------------------------------------------------------- */
  --sl-color-primary-50: var(--hiisi-accent-50);
  --sl-color-primary-100: var(--hiisi-accent-100);
  --sl-color-primary-200: var(--hiisi-accent-200);
  --sl-color-primary-300: var(--hiisi-accent-300);
  --sl-color-primary-400: var(--hiisi-accent-400);
  --sl-color-primary-500: var(--hiisi-accent-500);
  --sl-color-primary-600: var(--hiisi-accent-600);
  --sl-color-primary-700: var(--hiisi-accent-700);
  --sl-color-primary-800: var(--hiisi-accent-800);
  --sl-color-primary-900: var(--hiisi-accent-900);
  --sl-color-primary-950: var(--hiisi-accent-950);

  /* --------------------------------------------------------------------------
     Shoelace - Focus Ring
     -------------------------------------------------------------------------- */
  --sl-focus-ring-color: var(--hiisi-accent-500);

  /* --------------------------------------------------------------------------
     No Rounded Corners
     -------------------------------------------------------------------------- */
  --pico-border-radius: 0;
  --sl-border-radius-small: 0;
  --sl-border-radius-medium: 0;
  --sl-border-radius-large: 0;
  --sl-border-radius-x-large: 0;
  --sl-border-radius-circle: 0;
  --sl-border-radius-pill: 0;
  --sl-input-border-radius-small: 0;
  --sl-input-border-radius-medium: 0;
  --sl-input-border-radius-large: 0;
}

/* ==========================================================================
   LIGHT THEME
   ========================================================================== */
@media only screen and (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    /* Background & Base Colors */
    --pico-background-color: #fff;
    --pico-color: #000;
    --pico-muted-color: #555;
    --pico-muted-border-color: #ddd;

    /* Headings */
    --pico-h1-color: #000;
    --pico-h2-color: #000;
    --pico-h3-color: #111;
    --pico-h4-color: #222;
    --pico-h5-color: #333;
    --pico-h6-color: #444;

    /* Primary Colors (accent) */
    --pico-primary: #3fb68b;
    --pico-primary-background: #3fb68b;
    --pico-primary-border: #3fb68b;
    --pico-primary-underline: rgba(63, 182, 139, 0.5);
    --pico-primary-hover: #2d8a69;
    --pico-primary-hover-background: #359f79;
    --pico-primary-hover-border: #359f79;
    --pico-primary-hover-underline: #2d8a69;
    --pico-primary-focus: rgba(63, 182, 139, 0.5);
    --pico-primary-inverse: #fff;

    /* Secondary Colors (muted gray) */
    --pico-secondary: #555;
    --pico-secondary-background: #555;
    --pico-secondary-border: #555;
    --pico-secondary-underline: rgba(85, 85, 85, 0.5);
    --pico-secondary-hover: #333;
    --pico-secondary-hover-background: #444;
    --pico-secondary-hover-border: #444;
    --pico-secondary-hover-underline: #333;
    --pico-secondary-focus: rgba(85, 85, 85, 0.5);
    --pico-secondary-inverse: #fff;

    /* Contrast Colors */
    --pico-contrast: #000;
    --pico-contrast-background: #000;
    --pico-contrast-border: #000;
    --pico-contrast-underline: rgba(0, 0, 0, 0.5);
    --pico-contrast-hover: #222;
    --pico-contrast-hover-background: #111;
    --pico-contrast-hover-border: #111;
    --pico-contrast-hover-underline: #222;
    --pico-contrast-focus: rgba(0, 0, 0, 0.5);
    --pico-contrast-inverse: #fff;

    /* Form Elements */
    --pico-form-element-background-color: #fff;
    --pico-form-element-border-color: #ccc;
    --pico-form-element-color: #000;
    --pico-form-element-placeholder-color: #888;
    --pico-form-element-active-background-color: #fff;
    --pico-form-element-active-border-color: #3fb68b;
    --pico-form-element-focus-color: rgba(63, 182, 139, 0.25);
    --pico-form-element-valid-border-color: #3fb68b;
    --pico-form-element-valid-active-border-color: #2d8a69;
    --pico-form-element-valid-focus-color: rgba(63, 182, 139, 0.25);

    /* UI Components */
    --pico-switch-checked-background-color: #3fb68b;
    --pico-range-active-border-color: #3fb68b;
    --pico-range-thumb-border-color: #3fb68b;
    --pico-range-thumb-color: #3fb68b;
    --pico-range-thumb-active-color: #359f79;
    --pico-progress-color: #3fb68b;
    --pico-accordion-active-summary-color: #3fb68b;
    --pico-card-background-color: #f5f5f5;
    --pico-card-border-color: #ddd;
    --pico-card-box-shadow: none;
    --pico-tooltip-background-color: #000;
    --pico-tooltip-color: #fff;
    --pico-card-sectioning-background-color: #eee;


    /* Shoelace Neutrals */
    --sl-color-neutral-0: #fff;
    --sl-color-neutral-50: #f5f5f5;
    --sl-color-neutral-100: #eee;
    --sl-color-neutral-200: #ddd;
    --sl-color-neutral-300: #ccc;
    --sl-color-neutral-400: #999;
    --sl-color-neutral-500: #777;
    --sl-color-neutral-600: #555;
    --sl-color-neutral-700: #444;
    --sl-color-neutral-800: #222;
    --sl-color-neutral-900: #111;
    --sl-color-neutral-950: #000;
    --sl-color-neutral-1000: #000;

    /* Shoelace Inputs */
    --sl-input-background-color: #fff;
    --sl-input-border-color: #ccc;
    --sl-input-border-color-hover: #999;
    --sl-input-border-color-focus: #3fb68b;
    --sl-input-color: #000;

    /* Shoelace Panels */
    --sl-panel-background-color: #fff;
    --sl-panel-border-color: #ddd;
    --sl-overlay-background-color: rgba(0, 0, 0, 0.5);
    --sl-tooltip-background-color: #000;
    --sl-tooltip-color: #fff;
  }
}

:root[data-theme="light"] {
    /* Background & Base Colors */
    --pico-background-color: #fff;
    --pico-color: #000;
    --pico-muted-color: #555;
    --pico-muted-border-color: #ddd;

    /* Headings */
    --pico-h1-color: #000;
    --pico-h2-color: #000;
    --pico-h3-color: #111;
    --pico-h4-color: #222;
    --pico-h5-color: #333;
    --pico-h6-color: #444;

    /* Primary Colors (accent) */
    --pico-primary: #3fb68b;
    --pico-primary-background: #3fb68b;
    --pico-primary-border: #3fb68b;
    --pico-primary-underline: rgba(63, 182, 139, 0.5);
    --pico-primary-hover: #2d8a69;
    --pico-primary-hover-background: #359f79;
    --pico-primary-hover-border: #359f79;
    --pico-primary-hover-underline: #2d8a69;
    --pico-primary-focus: rgba(63, 182, 139, 0.5);
    --pico-primary-inverse: #fff;

    /* Secondary Colors (muted gray) */
    --pico-secondary: #555;
    --pico-secondary-background: #555;
    --pico-secondary-border: #555;
    --pico-secondary-underline: rgba(85, 85, 85, 0.5);
    --pico-secondary-hover: #333;
    --pico-secondary-hover-background: #444;
    --pico-secondary-hover-border: #444;
    --pico-secondary-hover-underline: #333;
    --pico-secondary-focus: rgba(85, 85, 85, 0.5);
    --pico-secondary-inverse: #fff;

    /* Contrast Colors */
    --pico-contrast: #000;
    --pico-contrast-background: #000;
    --pico-contrast-border: #000;
    --pico-contrast-underline: rgba(0, 0, 0, 0.5);
    --pico-contrast-hover: #222;
    --pico-contrast-hover-background: #111;
    --pico-contrast-hover-border: #111;
    --pico-contrast-hover-underline: #222;
    --pico-contrast-focus: rgba(0, 0, 0, 0.5);
    --pico-contrast-inverse: #fff;

    /* Form Elements */
    --pico-form-element-background-color: #fff;
    --pico-form-element-border-color: #ccc;
    --pico-form-element-color: #000;
    --pico-form-element-placeholder-color: #888;
    --pico-form-element-active-background-color: #fff;
    --pico-form-element-active-border-color: #3fb68b;
    --pico-form-element-focus-color: rgba(63, 182, 139, 0.25);
    --pico-form-element-valid-border-color: #3fb68b;
    --pico-form-element-valid-active-border-color: #2d8a69;
    --pico-form-element-valid-focus-color: rgba(63, 182, 139, 0.25);

    /* UI Components */
    --pico-switch-checked-background-color: #3fb68b;
    --pico-range-active-border-color: #3fb68b;
    --pico-range-thumb-border-color: #3fb68b;
    --pico-range-thumb-color: #3fb68b;
    --pico-range-thumb-active-color: #359f79;
    --pico-progress-color: #3fb68b;
    --pico-accordion-active-summary-color: #3fb68b;
    --pico-card-background-color: #f9f9f9;
    --pico-card-border-color: #ddd;
    --pico-card-box-shadow: none;
    --pico-tooltip-background-color: #000;
    --pico-tooltip-color: #fff;
    --pico-card-sectioning-background-color: #eee;

    /* Shoelace Neutrals */
    --sl-color-neutral-0: #fff;
    --sl-color-neutral-50: #f5f5f5;
    --sl-color-neutral-100: #eee;
    --sl-color-neutral-200: #ddd;
    --sl-color-neutral-300: #ccc;
    --sl-color-neutral-400: #999;
    --sl-color-neutral-500: #777;
    --sl-color-neutral-600: #555;
    --sl-color-neutral-700: #444;
    --sl-color-neutral-800: #222;
    --sl-color-neutral-900: #111;
    --sl-color-neutral-950: #000;
    --sl-color-neutral-1000: #000;

    /* Shoelace Inputs */
    --sl-input-background-color: #fff;
    --sl-input-border-color: #ccc;
    --sl-input-border-color-hover: #999;
    --sl-input-border-color-focus: #3fb68b;
    --sl-input-color: #000;

    /* Shoelace Panels */
    --sl-panel-background-color: #fff;
    --sl-panel-border-color: #ddd;
    --sl-overlay-background-color: rgba(0, 0, 0, 0.5);
    --sl-tooltip-background-color: #000;
    --sl-tooltip-color: #fff;
  }

/* ==========================================================================
   DARK THEME
   ========================================================================== */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Background & Base Colors */
    --pico-background-color: #000;
    --pico-color: #fff;
    --pico-muted-color: #aaa;
    --pico-muted-border-color: #333;

    /* Headings */
    --pico-h1-color: #fff;
    --pico-h2-color: #fff;
    --pico-h3-color: #eee;
    --pico-h4-color: #ddd;
    --pico-h5-color: #ccc;
    --pico-h6-color: #bbb;

    /* Primary Colors (accent) */
    --pico-primary: #3fb68b;
    --pico-primary-background: #3fb68b;
    --pico-primary-border: #3fb68b;
    --pico-primary-underline: rgba(63, 182, 139, 0.5);
    --pico-primary-hover: #6ed1ad;
    --pico-primary-hover-background: #359f79;
    --pico-primary-hover-border: #359f79;
    --pico-primary-hover-underline: #6ed1ad;
    --pico-primary-focus: rgba(63, 182, 139, 0.5);
    --pico-primary-inverse: #000;

    /* Secondary Colors (muted gray) */
    --pico-secondary: #aaa;
    --pico-secondary-background: #aaa;
    --pico-secondary-border: #aaa;
    --pico-secondary-underline: rgba(170, 170, 170, 0.5);
    --pico-secondary-hover: #ccc;
    --pico-secondary-hover-background: #bbb;
    --pico-secondary-hover-border: #bbb;
    --pico-secondary-hover-underline: #ccc;
    --pico-secondary-focus: rgba(170, 170, 170, 0.5);
    --pico-secondary-inverse: #000;

    /* Contrast Colors */
    --pico-contrast: #fff;
    --pico-contrast-background: #fff;
    --pico-contrast-border: #fff;
    --pico-contrast-underline: rgba(255, 255, 255, 0.5);
    --pico-contrast-hover: #ddd;
    --pico-contrast-hover-background: #eee;
    --pico-contrast-hover-border: #eee;
    --pico-contrast-hover-underline: #ddd;
    --pico-contrast-focus: rgba(255, 255, 255, 0.5);
    --pico-contrast-inverse: #000;

    /* Form Elements */
    --pico-form-element-background-color: #000;
    --pico-form-element-border-color: #444;
    --pico-form-element-color: #fff;
    --pico-form-element-placeholder-color: #777;
    --pico-form-element-active-background-color: #000;
    --pico-form-element-active-border-color: #3fb68b;
    --pico-form-element-focus-color: rgba(63, 182, 139, 0.25);
    --pico-form-element-valid-border-color: #3fb68b;
    --pico-form-element-valid-active-border-color: #6ed1ad;
    --pico-form-element-valid-focus-color: rgba(63, 182, 139, 0.25);

    /* UI Components */
    --pico-switch-checked-background-color: #3fb68b;
    --pico-range-active-border-color: #3fb68b;
    --pico-range-thumb-border-color: #3fb68b;
    --pico-range-thumb-color: #3fb68b;
    --pico-range-thumb-active-color: #6ed1ad;
    --pico-progress-color: #3fb68b;
    --pico-accordion-active-summary-color: #3fb68b;
    --pico-card-background-color: #111;
    --pico-card-border-color: #333;
    --pico-card-box-shadow: none;
    --pico-tooltip-background-color: #fff;
    --pico-tooltip-color: #000;
    --pico-card-sectioning-background-color: #090909;

    /* Shoelace Neutrals (inverted) */
    --sl-color-neutral-0: #000;
    --sl-color-neutral-50: #111;
    --sl-color-neutral-100: #222;
    --sl-color-neutral-200: #333;
    --sl-color-neutral-300: #444;
    --sl-color-neutral-400: #666;
    --sl-color-neutral-500: #888;
    --sl-color-neutral-600: #aaa;
    --sl-color-neutral-700: #bbb;
    --sl-color-neutral-800: #ddd;
    --sl-color-neutral-900: #eee;
    --sl-color-neutral-950: #fff;
    --sl-color-neutral-1000: #fff;

    /* Shoelace Inputs */
    --sl-input-background-color: #000;
    --sl-input-border-color: #444;
    --sl-input-border-color-hover: #666;
    --sl-input-border-color-focus: #3fb68b;
    --sl-input-color: #fff;

    /* Shoelace Panels */
    --sl-panel-background-color: #111;
    --sl-panel-border-color: #333;
    --sl-overlay-background-color: rgba(0, 0, 0, 0.75);
    --sl-tooltip-background-color: #fff;
    --sl-tooltip-color: #000;
  }
}

:root[data-theme="dark"] {
    /* Background & Base Colors */
    --pico-background-color: #000;
    --pico-color: #fff;
    --pico-muted-color: #aaa;
    --pico-muted-border-color: #333;

    /* Headings */
    --pico-h1-color: #fff;
    --pico-h2-color: #fff;
    --pico-h3-color: #eee;
    --pico-h4-color: #ddd;
    --pico-h5-color: #ccc;
    --pico-h6-color: #bbb;

    /* Primary Colors (accent) */
    --pico-primary: #3fb68b;
    --pico-primary-background: #3fb68b;
    --pico-primary-border: #3fb68b;
    --pico-primary-underline: rgba(63, 182, 139, 0.5);
    --pico-primary-hover: #6ed1ad;
    --pico-primary-hover-background: #359f79;
    --pico-primary-hover-border: #359f79;
    --pico-primary-hover-underline: #6ed1ad;
    --pico-primary-focus: rgba(63, 182, 139, 0.5);
    --pico-primary-inverse: #000;

    /* Secondary Colors (muted gray) */
    --pico-secondary: #aaa;
    --pico-secondary-background: #aaa;
    --pico-secondary-border: #aaa;
    --pico-secondary-underline: rgba(170, 170, 170, 0.5);
    --pico-secondary-hover: #ccc;
    --pico-secondary-hover-background: #bbb;
    --pico-secondary-hover-border: #bbb;
    --pico-secondary-hover-underline: #ccc;
    --pico-secondary-focus: rgba(170, 170, 170, 0.5);
    --pico-secondary-inverse: #000;

    /* Contrast Colors */
    --pico-contrast: #fff;
    --pico-contrast-background: #fff;
    --pico-contrast-border: #fff;
    --pico-contrast-underline: rgba(255, 255, 255, 0.5);
    --pico-contrast-hover: #ddd;
    --pico-contrast-hover-background: #eee;
    --pico-contrast-hover-border: #eee;
    --pico-contrast-hover-underline: #ddd;
    --pico-contrast-focus: rgba(255, 255, 255, 0.5);
    --pico-contrast-inverse: #000;

    /* Form Elements */
    --pico-form-element-background-color: #000;
    --pico-form-element-border-color: #444;
    --pico-form-element-color: #fff;
    --pico-form-element-placeholder-color: #777;
    --pico-form-element-active-background-color: #000;
    --pico-form-element-active-border-color: #3fb68b;
    --pico-form-element-focus-color: rgba(63, 182, 139, 0.25);
    --pico-form-element-valid-border-color: #3fb68b;
    --pico-form-element-valid-active-border-color: #6ed1ad;
    --pico-form-element-valid-focus-color: rgba(63, 182, 139, 0.25);

    /* UI Components */
    --pico-switch-checked-background-color: #3fb68b;
    --pico-range-active-border-color: #3fb68b;
    --pico-range-thumb-border-color: #3fb68b;
    --pico-range-thumb-color: #3fb68b;
    --pico-range-thumb-active-color: #6ed1ad;
    --pico-progress-color: #3fb68b;
    --pico-accordion-active-summary-color: #3fb68b;
    --pico-card-background-color: #111;
    --pico-card-border-color: #333;
    --pico-card-box-shadow: none;
    --pico-tooltip-background-color: #fff;
    --pico-tooltip-color: #000;
    --pico-card-sectioning-background-color: #090909;

    /* Shoelace Neutrals (inverted) */
    --sl-color-neutral-0: #000;
    --sl-color-neutral-50: #111;
    --sl-color-neutral-100: #222;
    --sl-color-neutral-200: #333;
    --sl-color-neutral-300: #444;
    --sl-color-neutral-400: #666;
    --sl-color-neutral-500: #888;
    --sl-color-neutral-600: #aaa;
    --sl-color-neutral-700: #bbb;
    --sl-color-neutral-800: #ddd;
    --sl-color-neutral-900: #eee;
    --sl-color-neutral-950: #fff;
    --sl-color-neutral-1000: #fff;

    /* Shoelace Inputs */
    --sl-input-background-color: #000;
    --sl-input-border-color: #444;
    --sl-input-border-color-hover: #666;
    --sl-input-border-color-focus: #3fb68b;
    --sl-input-color: #fff;

    /* Shoelace Panels */
    --sl-panel-background-color: #111;
    --sl-panel-border-color: #333;
    --sl-overlay-background-color: rgba(0, 0, 0, 0.75);
    --sl-tooltip-background-color: #fff;
    --sl-tooltip-color: #000;
  }

/* Global border radius override for all elements */
*,
*::before,
*::after {
  border-radius: 0;
}

/* Prevent Pico CSS from styling Shoelace button internals */
sl-button {
  /* Reset Pico's button styling on the host element */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* Keep card surfaces explicitly outlined in all themes */
article {
  border: 1px solid var(--pico-card-border-color);
  box-shadow: none;
}

sl-card::part(base) {
  border: 1px solid var(--pico-card-border-color);
  box-shadow: none;
}

/* Theme toggle + footer logo support */
sl-radio-group.theme-toggle {
  display: inline-flex;
  align-items: center;
}

sl-radio-group.theme-toggle::part(form-control-label) {
  display: none;
}

sl-radio-group.theme-toggle::part(form-control) {
  gap: 0.25rem;
}

sl-radio-group.theme-toggle sl-radio-button::part(button) {
  padding: 0.25rem 0.5rem;
}

/* Sticky footer layout */
html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

/* Main content area grows to push footer down */
body > main,
body > .container,
body > article,
body > section {
  flex: 1 0 auto;
}

/* First main element gets the flex-grow */
body > main:first-of-type {
  flex: 1 0 auto;
}

/* Footer sticks to bottom */
body > footer,
body > footer.container-fluid,
footer.container-fluid {
  flex-shrink: 0;
  margin-top: auto;
  width: 100%;
}

.footer-logo {
  height: 28px;
  width: auto;
}

/* Theme-aware logo visibility */
/* Light theme (default): show dark-colored logo for contrast */
html:not([data-theme="dark"]) .footer-logo-light,
:root:not([data-theme="dark"]) .footer-logo-light {
  display: inline-block !important;
}

html:not([data-theme="dark"]) .footer-logo-dark,
:root:not([data-theme="dark"]) .footer-logo-dark {
  display: none !important;
}

/* Dark theme: show light-colored logo for contrast */
html[data-theme="dark"] .footer-logo-dark,
:root[data-theme="dark"] .footer-logo-dark {
  display: inline-block !important;
}

html[data-theme="dark"] .footer-logo-light,
:root[data-theme="dark"] .footer-logo-light {
  display: none !important;
}

/* Grammar term highlights */
.grammar-term {
  cursor: help;
  color: var(--pico-primary);
  border-bottom: 1px dotted var(--pico-primary);
  text-decoration: none;
}

.grammar-term:hover {
  color: var(--pico-primary-hover);
  border-bottom-color: var(--pico-primary-hover);
}