/* ============================================================
   theme.css  –  CSS custom properties + automatic dark mode
   Chrome on Android respects prefers-color-scheme from the OS.
   ============================================================ */

/* --- Light mode defaults --- */
:root {
  /* Page surfaces */
  --color-bg-page:          #f4f4f4;
  --color-bg-card:          #ffffff;
  --color-bg-card-alt:      #f8f9fa;
  --color-bg-row-alt:       #f9f9f9;
  --color-bg-input:         #ffffff;

  /* Text */
  --color-text-primary:     #333333;
  --color-text-secondary:   #666666;
  --color-text-muted:       #999999;
  --color-text-snippet:     #555555;

  /* Brand blue */
  --color-blue:             #1976d2;
  --color-blue-hover:       #0d47a1;
  --color-blue-nav:         #007bff;
  --color-blue-nav-hover:   #0056b3;
  --color-blue-light-bg:    #e3f2fd;
  --color-blue-light-text:  #1565c0;
  --color-blue-border:      #90caf9;

  /* Borders */
  --color-border:           #dddddd;
  --color-border-light:     #e0e0e0;

  /* Status: success */
  --color-success-bg:       #d4edda;
  --color-success-text:     #155724;
  --color-success-dark:     #2e7d32;
  --color-success-action:   #28a745;
  --color-success-action-hover: #218838;
  --color-thumbup-bg:       #e8f5e9;

  /* Status: warning */
  --color-warn-bg:          #fff3cd;
  --color-warn-text:        #856404;
  --color-warn-border:      #ffeeba;

  /* Status: danger/error */
  --color-danger:           #f44336;
  --color-danger-hover:     #d32f2f;
  --color-danger-bg:        #ffebee;
  --color-danger-text:      #c62828;
  --color-error-bg:         #f8d7da;
  --color-error-text:       #721c24;
  --color-error-border:     #f5c6cb;

  /* Abstract panel */
  --color-abstract-bg:      #f8f9fa;
  --color-abstract-border:  #1976d2;

  /* Chat bubbles */
  --color-bubble-user:      #007bff;
  --color-bubble-user-text: #ffffff;
  --color-bubble-asst:      #f0f0f0;
  --color-bubble-asst-text: #222222;

  /* Citation cards */
  --color-card-hover-bg:    #f0f7ff;
  --color-card-sel-bg:      #e8f2ff;

  /* Action buttons */
  --color-action-orange:        #ff9800;
  --color-action-orange-hover:  #e68900;
  --color-action-grey:          #6c757d;
  --color-action-grey-hover:    #545b62;
  --color-action-teal:          #20c997;

  /* Status badge: pending (grey) */
  --color-pending-bg:           #e2e3e5;
  --color-pending-text:         #383d41;

  /* Score badge: unmatched (orange) */
  --color-score-unmatched-bg:   #fff3e0;
  --color-score-unmatched-text: #ef6c00;

  /* Feedback thumbs: up (green) */
  --color-feedback-up:      #43a047;

  /* Google auth */
  --color-google-blue:      #4285f4;
  --color-google-hover:     #3367d6;

  /* Gemini/AI info banner */
  --color-purple-bg:        #f3e5f5;
  --color-purple-text:      #4a148c;

  /* Misc */
  --color-drag-highlight:   #bbdefb;
  --color-spinner-track:    #f3f3f3;
  --color-disabled-bg:      #cccccc;
  --color-disabled-text:    #666666;
  --color-tooltip-bg:       #333333;
  --color-tooltip-text:     #ffffff;
}

/* --- Dark mode overrides --- */
@media (prefers-color-scheme: dark) {
  :root {
    /* Page surfaces */
    --color-bg-page:          #121212;
    --color-bg-card:          #1e1e1e;
    --color-bg-card-alt:      #252525;
    --color-bg-row-alt:       #232323;
    --color-bg-input:         #2a2a2a;

    /* Text */
    --color-text-primary:     #e2e2e2;
    --color-text-secondary:   #aaaaaa;
    --color-text-muted:       #777777;
    --color-text-snippet:     #bbbbbb;

    /* Brand blue — lightened for contrast on dark bg */
    --color-blue:             #64b5f6;
    --color-blue-hover:       #90caf9;
    --color-blue-nav:         #1565c0;
    --color-blue-nav-hover:   #0d47a1;
    --color-blue-light-bg:    #1a2a3a;
    --color-blue-light-text:  #90caf9;
    --color-blue-border:      #1e4976;

    /* Borders */
    --color-border:           #3a3a3a;
    --color-border-light:     #2e2e2e;

    /* Status: success */
    --color-success-bg:       #1b3a23;
    --color-success-text:     #81c784;
    --color-success-dark:     #66bb6a;
    --color-success-action:   #388e3c;
    --color-success-action-hover: #2e7d32;
    --color-thumbup-bg:       #1b3a23;

    /* Status: warning */
    --color-warn-bg:          #3a2f00;
    --color-warn-text:        #ffe082;
    --color-warn-border:      #5a4800;

    /* Status: danger/error */
    --color-danger:           #ef5350;
    --color-danger-hover:     #e53935;
    --color-danger-bg:        #3b1212;
    --color-danger-text:      #ef9a9a;
    --color-error-bg:         #3b1212;
    --color-error-text:       #ef9a9a;
    --color-error-border:     #5a1a1a;

    /* Abstract panel */
    --color-abstract-bg:      #252525;
    --color-abstract-border:  #64b5f6;

    /* Chat bubbles */
    --color-bubble-user:      #1565c0;
    --color-bubble-user-text: #e3f2fd;
    --color-bubble-asst:      #2a2a2a;
    --color-bubble-asst-text: #e2e2e2;

    /* Citation cards */
    --color-card-hover-bg:    #1a2a3a;
    --color-card-sel-bg:      #152235;

    /* Status badge: pending */
    --color-pending-bg:           #2a2a2a;
    --color-pending-text:         #aaaaaa;

    /* Score badge: unmatched */
    --color-score-unmatched-bg:   #3a2000;
    --color-score-unmatched-text: #ffa726;

    /* Feedback thumbs */
    --color-feedback-up:      #66bb6a;

    /* Action buttons — hues readable on dark bg already */
    --color-action-orange:        #ffa726;
    --color-action-orange-hover:  #fb8c00;
    --color-action-grey:          #546e7a;
    --color-action-grey-hover:    #455a64;
    --color-action-teal:          #26a69a;

    /* Google auth — keep roughly the same */
    --color-google-blue:      #5c9bf5;
    --color-google-hover:     #4a84e0;

    /* Gemini/AI info banner */
    --color-purple-bg:        #2a1040;
    --color-purple-text:      #ce93d8;

    /* Misc */
    --color-drag-highlight:   #1a3a5a;
    --color-spinner-track:    #2a2a2a;
    --color-disabled-bg:      #3a3a3a;
    --color-disabled-text:    #888888;
  }

  /* Native form controls */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  textarea {
    color-scheme: dark;
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    border-color: var(--color-border);
  }

  /* Scrollbar tinting */
  ::-webkit-scrollbar { background: var(--color-bg-page); }
  ::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
}