/**
 * Light Theme
 * Override semantic tokens for light mode
 */

[data-theme="light"] {
  /* Backgrounds — hierarchy: white → gray-50 → gray-100 → gray-200 → gray-300 */
  --bg-primary: var(--color-white);            /* Page/body base */
  --bg-secondary: var(--color-gray-50);        /* Header, footer, cards, panels */
  --bg-tertiary: var(--color-gray-100);        /* Nested areas, graph canvas, table headers */
  --bg-quaternary: var(--color-gray-200);      /* Deep nested elements */
  --bg-elevated: var(--color-white);           /* Modals, dropdowns (lift via shadow) */
  --bg-hover: var(--color-gray-200);           /* Hover states (distinct from tertiary) */
  --bg-active: var(--color-gray-300);          /* Active/pressed states */
  --bg-input: var(--color-white);              /* Input fields */
  --bg-overlay: rgba(0, 0, 0, 0.3);

  /* Text */
  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-600);
  --text-tertiary: var(--color-gray-500);
  --text-inverse: var(--color-gray-50);

  /* Borders */
  --border-default: var(--color-gray-200);
  --border-subtle: var(--color-gray-100);
  --border-strong: var(--color-gray-300);

  /* Shadows - lighter, more visible for light theme */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* Toggle */
  --toggle-bg: var(--color-gray-300);
  --toggle-knob: var(--color-gray-400);

  /* Graph */
  --graph-bg: var(--color-white);
  --graph-label-color: var(--color-gray-700);
  --graph-link-default: var(--color-gray-500);

  /* Drawer */
  --drawer-bg: var(--color-gray-50);
  --drawer-header-bg: var(--color-gray-100);

  /* Status backgrounds - lighter versions */
  --status-success-bg: var(--color-green-100);
  --status-success-text: var(--color-green-700);
  --status-warning-bg: var(--color-amber-100);
  --status-warning-text: var(--color-amber-700);
  --status-error-bg: var(--color-red-100);
  --status-error-text: var(--color-red-700);
  --status-info-bg: var(--color-blue-100);
  --status-info-text: var(--color-blue-700);

  /* Accent adjustments for better contrast on light */
  --accent-primary-subtle: var(--color-blue-100);

  color-scheme: light;
}

/* Auto-detect system preference */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* Backgrounds — hierarchy: white → gray-50 → gray-100 → gray-200 → gray-300 */
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-gray-50);
    --bg-tertiary: var(--color-gray-100);
    --bg-quaternary: var(--color-gray-200);
    --bg-elevated: var(--color-white);
    --bg-hover: var(--color-gray-200);
    --bg-active: var(--color-gray-300);
    --bg-input: var(--color-white);
    --bg-overlay: rgba(0, 0, 0, 0.3);

    /* Text */
    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-600);
    --text-tertiary: var(--color-gray-500);
    --text-inverse: var(--color-gray-50);

    /* Borders */
    --border-default: var(--color-gray-200);
    --border-subtle: var(--color-gray-100);
    --border-strong: var(--color-gray-300);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

    /* Toggle */
    --toggle-bg: var(--color-gray-300);
    --toggle-knob: var(--color-gray-400);

    /* Graph */
    --graph-bg: var(--color-white);
    --graph-link-default: var(--color-gray-500);

    /* Drawer */
    --drawer-bg: var(--color-white);
    --drawer-header-bg: var(--color-gray-100);

    /* Status backgrounds */
    --status-success-bg: var(--color-green-100);
    --status-success-text: var(--color-green-700);
    --status-warning-bg: var(--color-amber-100);
    --status-warning-text: var(--color-amber-700);
    --status-error-bg: var(--color-red-100);
    --status-error-text: var(--color-red-700);
    --status-info-bg: var(--color-blue-100);
    --status-info-text: var(--color-blue-700);

    --accent-primary-subtle: var(--color-blue-100);

    color-scheme: light;
  }
}