/* Arquivo gerado por 'php spark theme:build' — NÃO EDITAR MANUALMENTE. */

/* === csl === */
[data-theme='csl'] {
  --font-sans: 'Inter', sans-serif;
  --radius-base: 0.5rem;

  --color-ink: #33414d;
  --color-slate: #75838f;
  --color-canvas: #f1f2f5;
  --color-surface: #ffffff;
  --color-hairline: rgba(51, 65, 77, 0.08);

  /* PT: a sidebar deste tema é intencionalmente escura (marca do
         Colégio São Luís) — diferente do restante do app, que continua
         claro. É por isso que este token diverge de --color-surface.
     EN: this theme's sidebar is intentionally dark (Colégio São Luís's
         brand) — different from the rest of the app, which stays light.
         That's why this token diverges from --color-surface. */
  --color-sidebar: #10173a;

  --color-brand: #173358;

  --color-brand-tint:  color-mix(in oklab, var(--color-brand) 12%, white);
  --color-brand-ring:  color-mix(in oklab, var(--color-brand) 20%, transparent);
  --color-brand-hover: color-mix(in oklab, var(--color-brand) 85%, black);

  --shadow-soft: 0 2px 4px rgba(51, 65, 77, 0.05), 0 12px 24px -8px rgba(51, 65, 77, 0.12);
  --shadow-lift: 0 4px 8px rgba(51, 65, 77, 0.08), 0 16px 32px -8px rgba(51, 65, 77, 0.16);

  --color-teal: #0e8a82;
  --color-teal-tint: #e4f4f2;
  --color-amber: #c98a1f;
  --color-amber-tint: #fbf1de;
  --color-sky: #3c82c4;
  --color-sky-tint: #e9f1fa;
}

/* === default === */
[data-theme='default'] {
  --font-sans: 'Inter', sans-serif;
  --radius-base: 0.5rem;

  --color-ink: #33414d;
  --color-slate: #75838f;
  --color-canvas: #e6e6e6;
  --color-surface: #ffffff;
  --color-hairline: rgba(51, 65, 77, 0.08);
  --color-sidebar: var(--color-surface);

  --color-brand: #0e8a82;

  --color-teal: #0e8a82;
  --color-teal-tint: #e4f4f2;
  --color-amber: #c98a1f;
  --color-amber-tint: #fbf1de;
  --color-sky: #3c82c4;
  --color-sky-tint: #e9f1fa;

  --color-brand-tint:  color-mix(in oklab, var(--color-brand) 12%, white);
  --color-brand-ring:  color-mix(in oklab, var(--color-brand) 20%, transparent);
  --color-brand-hover: color-mix(in oklab, var(--color-brand) 85%, black);

  /* PT: sombra escura funciona bem — fundo claro, então uma sombra
         escura por baixo cria profundidade normalmente.
     EN: dark shadow works well here — light background, so a dark
         shadow underneath creates depth normally. */
  --shadow-soft: 0 2px 4px rgba(51, 65, 77, 0.05), 0 12px 24px -8px rgba(51, 65, 77, 0.12);
  --shadow-lift: 0 4px 8px rgba(51, 65, 77, 0.08), 0 16px 32px -8px rgba(51, 65, 77, 0.16);
}

/* === modern === */
[data-theme='modern'] {
  --font-sans: 'Poppins', sans-serif;
  --radius-base: 1rem;

  --color-ink: #e2e8f0;
  --color-slate: #94a3b8;
  --color-canvas: #0f172a;
  --color-surface: #1e293b;
  --color-hairline: rgba(226, 232, 240, 0.1);

  /* PT: sidebar um pouco mais clara que o surface — reforça que ela é
         "a camada mais alta" (igual ao card no tema claro), em vez de
         ficar no mesmo tom do resto e depender só da sombra.
     EN: sidebar a bit lighter than surface — reinforces that it's "the
         topmost layer" (same as a card in the light theme), instead of
         staying the same tone as everything else and relying only on
         the shadow. */
  --color-sidebar: #253247;

  --color-brand: #6366f1;

  --color-teal: #2dd4bf;
  --color-teal-tint: rgba(45, 212, 191, 0.12);
  --color-amber: #fbbf24;
  --color-amber-tint: rgba(251, 191, 36, 0.12);
  --color-sky: #38bdf8;
  --color-sky-tint: rgba(56, 189, 248, 0.12);

  --color-brand-tint:  color-mix(in oklab, var(--color-brand) 18%, white);
  --color-brand-ring:  color-mix(in oklab, var(--color-brand) 25%, transparent);
  --color-brand-hover: color-mix(in oklab, var(--color-brand) 80%, white);

  /* PT: NÃO é a mesma fórmula do tema claro — uma sombra escura sobre
         fundo escuro não aparece. Aqui a "profundidade" vem de um anel
         claro sutil (simula borda) + uma sombra preta bem mais forte
         (não a mesma rgba fraca do tema claro).
     EN: NOT the same formula as the light theme — a dark shadow over a
         dark background doesn't show up. Here the "depth" comes from a
         subtle light ring (simulates a border) + a much stronger black
         shadow (not the same weak rgba from the light theme). */
  --shadow-soft: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 20px -6px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 32px -8px rgba(0, 0, 0, 0.65);
}