/* ==========================================================================
   Design Tokens - Spider Bucket (Google Drive & Windows Explorer inspired)
   ========================================================================== */

:root {
  color-scheme: light;
  /* Cores de Fundo e Superfície - Tema Claro */
  --ground: #F8FAFC;
  --rail-bg: #F0F4F9;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --surface-3: #EDF2F7;
  --hover: #E9EEF6;
  --active: #E0E8F4;

  /* Seleção e Destaque */
  --sel: #E8F0FE;
  --sel-hover: #DDE8FC;
  --sel-line: #C2D7FB;

  /* Linhas e Bordas */
  --line: #E2E8F0;
  --line-soft: #EDF2F7;
  --line-strong: #CBD5E1;

  /* Tipografia */
  --ink: #1E293B;
  --ink-mid: #475569;
  --ink-faint: #5C6B7F;   /* 4.66:1 no pior fundo claro (--hover) */
  --ink-inverted: #FFFFFF;

  /* Cores da Marca e Acento (Spider Bucket Blue) */
  --accent: #1A73E8;
  --accent-ink: #1557B0;
  --accent-soft: #E8F0FE;
  --accent-hover: #1765CC;
  --accent-active: #134DB0;

  /* Status */
  --ok: #1E8E3E;
  --ok-soft: #E6F4EA;
  --warn: #D97706;
  --warn-soft: #FEF3C7;
  --danger: #D93025;
  --danger-soft: #FCE8E6;
  --info: #1A73E8;
  --info-soft: #E8F0FE;

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-pop: 0 24px 48px -12px rgba(15, 23, 42, 0.18);

  /* Dimensões */
  --rail: 17.5rem;
  --head: 4rem;
  --info-panel: 20rem;
  --r-sm: 4px;
  --r: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 9999px;

  /* Fontes */
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
}

/* Tema Escuro: ativado por preferência de sistema ou classe no HTML */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0F1115;
    --rail-bg: #15181E;
    --surface: #1A1D24;
    --surface-2: #21252E;
    --surface-3: #282D38;
    --hover: #262B35;
    --active: #2E3440;

    --sel: #1C335A;
    --sel-hover: #223F6E;
    --sel-line: #2B528E;

    --line: #2A2F3B;
    --line-soft: #20242D;
    --line-strong: #3D4454;

    --ink: #F1F5F9;
    --ink-mid: #94A3B8;
    --ink-faint: #8A97A8;   /* 4.64:1 no pior fundo escuro (--surface-3) */
    --ink-inverted: #0F1115;

    --accent: #5B8DEF;
    --accent-ink: #90B5F8;
    --accent-soft: #1E2D4A;
    --accent-hover: #6FA0F5;
    --accent-active: #487BDC;

    --ok: #4ADE80;
    --ok-soft: #132E1D;
    --warn: #FBBF24;
    --warn-soft: #332710;
    --danger: #F87171;
    --danger-soft: #351818;
    --info: #60A5FA;
    --info-soft: #1A2E4C;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
    --shadow-pop: 0 24px 48px -12px rgba(0, 0, 0, 0.85);
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0F1115;
  --rail-bg: #15181E;
  --surface: #1A1D24;
  --surface-2: #21252E;
  --surface-3: #282D38;
  --hover: #262B35;
  --active: #2E3440;

  --sel: #1C335A;
  --sel-hover: #223F6E;
  --sel-line: #2B528E;

  --line: #2A2F3B;
  --line-soft: #20242D;
  --line-strong: #3D4454;

  --ink: #F1F5F9;
  --ink-mid: #94A3B8;
  --ink-faint: #8A97A8;   /* 4.64:1 no pior fundo escuro (--surface-3) */
  --ink-inverted: #0F1115;

  --accent: #5B8DEF;
  --accent-ink: #90B5F8;
  --accent-soft: #1E2D4A;
  --accent-hover: #6FA0F5;
  --accent-active: #487BDC;

  --ok: #4ADE80;
  --ok-soft: #132E1D;
  --warn: #FBBF24;
  --warn-soft: #332710;
  --danger: #F87171;
  --danger-soft: #351818;
  --info: #60A5FA;
  --info-soft: #1A2E4C;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 24px 48px -12px rgba(0, 0, 0, 0.85);
}