/**
 * Logged-in app shell tokens (extends semantic tokens from logged-out-tokens.css).
 * Defines surfaces and chrome (cards, sidebar, topbar, footer) for dark/light.
 * Theme resolution matches logged-out-tokens.css (system + html[data-theme]).
 */

:root {
  --sidebar-width: 300px;
  --accent-rgb: 0, 212, 255;

  --border-color: #444444;
  --card-bg: #2a2a2a;
  --card-header-bg: #1e2030;
  --card-hover-bg: #333546;
  --text-color: var(--text-secondary);
  --text-dark: #000000;

  --primary-color: #228be6;
  --success-color: #40c057;
  --warning-color: #fd7e14;
  --info-color: #15aabf;
  --danger-color: #fa5252;
  --accent-color: #00d4ff;
  --red-color: #ff4d4d;
  --green-color: #00e6e6;
  --blue-color: #00d4ff;
  --yellow-color: #ffdb4d;
  --purple-color: #b366ff;
  --orange-color: #ff944d;
  --pink-color: #ff66b3;
  --gray-color: #8c8c8c;

  --badge-text-color: #000000;
  --badge-dark-text-color: #ffffff;

  --form-container-bg: var(--card-bg);
  --form-header-bg: var(--card-header-bg);
  --form-footer-bg: var(--card-bg);
  --form-border-color: var(--border-color);
  --form-shadow: var(--shadow-md);

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;

  /* App chrome (dark) */
  --topbar-bg: #1a1f2c;
  --topbar-border: rgba(255, 255, 255, 0.05);
  --topbar-fg: rgba(255, 255, 255, 0.7);
  --topbar-fg-hover: #ffffff;

  --sidebar-bg: linear-gradient(145deg, #1a1f2c 0%, #2a2f3c 100%);
  --sidebar-border-subtle: rgba(255, 255, 255, 0.05);
  --sidebar-link: rgba(255, 255, 255, 0.7);
  --sidebar-link-hover: #ffffff;
  --sidebar-section-muted: rgba(255, 255, 255, 0.5);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
  --sidebar-input-bg: rgba(255, 255, 255, 0.05);
  --sidebar-input-border: rgba(255, 255, 255, 0.1);
  --sidebar-input-fg: #ffffff;
  --sidebar-input-placeholder: rgba(255, 255, 255, 0.5);
  --sidebar-surface: rgba(255, 255, 255, 0.03);

  --footer-bg: #1a1f2c;
  --footer-border: rgba(255, 255, 255, 0.05);
  --footer-fg: rgba(255, 255, 255, 0.7);
  --footer-fg-hover: #ffffff;
  --footer-hover-bg: rgba(255, 255, 255, 0.08);

  /* Dense UI / tables / modals (dark) */
  --surface-elevated: #333333;
  --surface-muted: #3a3a3a;
  --surface-deep: #2a2a2a;
  --surface-panel: #2f3349;
  --text-link: #3c83a5;
  --text-link-hover: #2c618c;
  --overlay-scrim: rgba(0, 0, 0, 0.8);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --accent-rgb: 13, 148, 136;

    --border-color: rgba(15, 23, 42, 0.14);
    --card-bg: #faf8f5;
    --card-header-bg: #ece8e2;
    --card-hover-bg: #e5e1d9;
    --text-color: var(--text-secondary);

    --topbar-bg: #ece8e2;
    --topbar-border: rgba(15, 23, 42, 0.1);
    --topbar-fg: rgba(15, 23, 42, 0.75);
    --topbar-fg-hover: #0f172a;

    --sidebar-bg: linear-gradient(145deg, #ece8e2 0%, #ddd8cf 100%);
    --sidebar-border-subtle: rgba(15, 23, 42, 0.1);
    --sidebar-link: rgba(15, 23, 42, 0.75);
    --sidebar-link-hover: #0f172a;
    --sidebar-section-muted: rgba(15, 23, 42, 0.45);
    --sidebar-hover-bg: rgba(15, 23, 42, 0.06);
    --sidebar-input-bg: rgba(255, 255, 255, 0.65);
    --sidebar-input-border: rgba(15, 23, 42, 0.12);
    --sidebar-input-fg: #0f172a;
    --sidebar-input-placeholder: rgba(15, 23, 42, 0.45);
    --sidebar-surface: rgba(15, 23, 42, 0.05);

    --footer-bg: #ece8e2;
    --footer-border: rgba(15, 23, 42, 0.1);
    --footer-fg: rgba(15, 23, 42, 0.75);
    --footer-fg-hover: #0f172a;
    --footer-hover-bg: rgba(15, 23, 42, 0.08);

    --surface-elevated: #f1f5f9;
    --surface-muted: #e2e8f0;
    --surface-deep: #ffffff;
    --surface-panel: #e2e8f0;
    --text-link: var(--accent);
    --text-link-hover: var(--accent-active);
    --overlay-scrim: rgba(15, 23, 42, 0.45);
  }
}

html[data-theme="light"] {
  --accent-rgb: 13, 148, 136;

  --border-color: rgba(15, 23, 42, 0.14);
  --card-bg: #faf8f5;
  --card-header-bg: #ece8e2;
  --card-hover-bg: #e5e1d9;
  --text-color: var(--text-secondary);

  --topbar-bg: #ece8e2;
  --topbar-border: rgba(15, 23, 42, 0.1);
  --topbar-fg: rgba(15, 23, 42, 0.75);
  --topbar-fg-hover: #0f172a;

  --sidebar-bg: linear-gradient(145deg, #ece8e2 0%, #ddd8cf 100%);
  --sidebar-border-subtle: rgba(15, 23, 42, 0.1);
  --sidebar-link: rgba(15, 23, 42, 0.75);
  --sidebar-link-hover: #0f172a;
  --sidebar-section-muted: rgba(15, 23, 42, 0.45);
  --sidebar-hover-bg: rgba(15, 23, 42, 0.06);
  --sidebar-input-bg: rgba(255, 255, 255, 0.65);
  --sidebar-input-border: rgba(15, 23, 42, 0.12);
  --sidebar-input-fg: #0f172a;
  --sidebar-input-placeholder: rgba(15, 23, 42, 0.45);
  --sidebar-surface: rgba(15, 23, 42, 0.05);

  --footer-bg: #ece8e2;
  --footer-border: rgba(15, 23, 42, 0.1);
  --footer-fg: rgba(15, 23, 42, 0.75);
  --footer-fg-hover: #0f172a;
  --footer-hover-bg: rgba(15, 23, 42, 0.08);

  --surface-elevated: #f1f5f9;
  --surface-muted: #e2e8f0;
  --surface-deep: #ffffff;
  --surface-panel: #e2e8f0;
  --text-link: var(--accent);
  --text-link-hover: var(--accent-active);
  --overlay-scrim: rgba(15, 23, 42, 0.45);
}

html[data-theme="dark"] {
  --accent-rgb: 0, 212, 255;

  --border-color: #444444;
  --card-bg: #2a2a2a;
  --card-header-bg: #1e2030;
  --card-hover-bg: #333546;
  --text-color: var(--text-secondary);

  --topbar-bg: #1a1f2c;
  --topbar-border: rgba(255, 255, 255, 0.05);
  --topbar-fg: rgba(255, 255, 255, 0.7);
  --topbar-fg-hover: #ffffff;

  --sidebar-bg: linear-gradient(145deg, #1a1f2c 0%, #2a2f3c 100%);
  --sidebar-border-subtle: rgba(255, 255, 255, 0.05);
  --sidebar-link: rgba(255, 255, 255, 0.7);
  --sidebar-link-hover: #ffffff;
  --sidebar-section-muted: rgba(255, 255, 255, 0.5);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
  --sidebar-input-bg: rgba(255, 255, 255, 0.05);
  --sidebar-input-border: rgba(255, 255, 255, 0.1);
  --sidebar-input-fg: #ffffff;
  --sidebar-input-placeholder: rgba(255, 255, 255, 0.5);
  --sidebar-surface: rgba(255, 255, 255, 0.03);

  --footer-bg: #1a1f2c;
  --footer-border: rgba(255, 255, 255, 0.05);
  --footer-fg: rgba(255, 255, 255, 0.7);
  --footer-fg-hover: #ffffff;
  --footer-hover-bg: rgba(255, 255, 255, 0.08);

  --surface-elevated: #333333;
  --surface-muted: #3a3a3a;
  --surface-deep: #2a2a2a;
  --surface-panel: #2f3349;
  --text-link: #3c83a5;
  --text-link-hover: #2c618c;
  --overlay-scrim: rgba(0, 0, 0, 0.8);
}