/* Tokens de design do Painel ADS (KAN-72): a UNICA fonte de cor, tipografia, espacamento, raio e
   sombra da v1, das telas de conta e do layout. Nenhuma outra folha de estilo usa cor literal (o
   teste test/tokens.spec.ts confere, e tambem o contraste WCAG AA de cada tema).

   Tema: cada cor e declarada uma vez com light-dark(claro, escuro). O modo automatico segue o
   sistema; <html data-theme="light|dark"> forca um deles. A paleta para daltonismo (KAN-73) e um
   atributo a parte, <html data-palette="cvd">, que vale com o claro e com o escuro. Valores de partida: o visual da v1 (a paleta final e a KAN-74). */

/* Ordem das camadas (declarada aqui, o primeiro arquivo carregado): tokens, componentes e, por ultimo,
   os utilitarios do Tailwind (tw:*) do app React, que assim ajustam componentes ui-*. Folhas sem
   camada (style.css, shell.css, v1) continuam vencendo as camadas. */
@layer ds.tokens, ds.components, theme, utilities;

@layer ds.tokens {
  :root {
    color-scheme: light dark;
  }

  :root[data-theme='light'] {
    color-scheme: light;
  }

  :root[data-theme='dark'] {
    color-scheme: dark;
  }

  :root {
    /* Superficies e texto */
    --color-bg: light-dark(#f2f3f7, #0e111a);
    --color-surface: light-dark(#ffffff, #161b28);
    --color-surface-2: light-dark(#ebedf4, #1d2333);
    --color-border: light-dark(#dde1eb, #2a3145);
    --color-text: light-dark(#171b28, #e8ebf4);
    --color-text-muted: light-dark(#5c6478, #99a1b8);

    /* Acao principal: --color-primary e cor de link/borda; --color-on-primary e o texto sobre ela */
    --color-primary: light-dark(#2f5da3, #8ab4f5);
    --color-primary-hover: light-dark(#264d88, #a9c8f8);
    --color-on-primary: light-dark(#ffffff, #0b1220);
    --color-primary-soft: light-dark(#e4ecfa, #1c2c4d);
    --color-focus: light-dark(#1f5fd1, #8fb2ff);

    /* Estados: a cor forte e para texto/icone; a -soft e fundo de chip/mensagem */
    --color-success: light-dark(#1a7a4c, #59d29b);
    --color-success-soft: light-dark(#e3f5ec, #103526);
    --color-warning: light-dark(#93590a, #e7ad54);
    --color-warning-soft: light-dark(#fbf0dc, #3a2c10);
    --color-danger: light-dark(#b23b3b, #ea8c8c);
    --color-danger-soft: light-dark(#fbe9e9, #3a1717);

    /* Faixas do calendario (preenchimento: basta 3:1 contra a superficie) */
    --color-cal-portfolio: light-dark(#2f5da3, #8ab4f5);
    --color-cal-exam: light-dark(#b23b3b, #ea8c8c);
    --color-cal-other: light-dark(#565a76, #a9acc4);

    /* Uma cor por disciplina (e uma neutra para as demais) */
    --color-subject-aoo: light-dark(#2f5da3, #8ab4f5);
    --color-subject-aoo-soft: light-dark(#e4ecfa, #1c2c4d);
    --color-subject-sd: light-dark(#0f7a5c, #5fdcae);
    --color-subject-sd-soft: light-dark(#e1f3ea, #103526);
    --color-subject-sbc: light-dark(#96591f, #d9a84e);
    --color-subject-sbc-soft: light-dark(#f6ecd9, #3a2c12);
    --color-subject-other: light-dark(#565a76, #a9acc4);
    --color-subject-other-soft: light-dark(#e7e8f1, #262a3a);

    /* Bloco de codigo: escuro nos dois temas, como em editores */
    --color-code-bg: light-dark(#171c28, #0b0e16);
    --color-code-text: light-dark(#d8ddf0, #d8ddf0);

    /* Elementos sobrepostos (barra fixa translucida, sombra) */
    --color-overlay: light-dark(rgb(255 255 255 / 0.9), rgb(22 27 40 / 0.9));
    --color-shadow: light-dark(rgb(20 24 38 / 0.14), rgb(0 0 0 / 0.5));
    --color-shadow-soft: light-dark(rgb(20 24 38 / 0.05), rgb(0 0 0 / 0.3));

    /* Tipografia: as telas usam so estes tamanhos (antes eram 23 diferentes so na v1) */
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --text-2xs: 0.7rem;
    --text-xs: 0.78rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-display: 2.4rem;
    --leading-tight: 1.25;
    --leading-normal: 1.6;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Espacamento (base 4px) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Raio e sombra */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 999px;
    --shadow-sm: 0 1px 2px var(--color-shadow-soft);
    --shadow-md: 0 1px 2px var(--color-shadow-soft), 0 8px 24px -12px var(--color-shadow);
    --shadow-lg: 0 8px 24px -8px var(--color-shadow);
  }

  /* Paleta para daltonismo (KAN-73): <html data-palette="cvd">, por cima do claro e do escuro. Cores da
   familia Okabe-Ito, escolhidas simulando protanopia, deuteranopia e tritanopia (Machado 2009) para
   que estados e tipos do calendario continuem distintos (CIEDE2000; o teste confere). As disciplinas
   mantem as cores: sempre aparecem com o nome escrito. Cor nunca e a unica pista. */
  :root[data-palette='cvd'] {
    --color-success: light-dark(#007857, #00a175);
    --color-success-soft: light-dark(#e0f2ec, #09241e);
    --color-warning: light-dark(#746c09, #f0e442);
    --color-warning-soft: light-dark(#f7f3d6, #33300c);
    --color-danger: light-dark(#ae427e, #cc79a7);
    --color-danger-soft: light-dark(#f7e6ef, #3a1a2c);
    --color-cal-portfolio: light-dark(#0072b2, #0b8fd6);
    --color-cal-exam: light-dark(#d55e00, #f0b23a);
    --color-cal-other: light-dark(#6b6b6b, #e3e3e3);
  }

  /* Navegadores sem light-dark() (ex.: Safari < 17.5) ficam no tema claro em vez de sem cor.
   Mantido igual aos valores claros acima pelo teste test/tokens.spec.ts. */
  @supports not (color: light-dark(#000000, #ffffff)) {
    :root {
      --color-bg: #f2f3f7;
      --color-surface: #ffffff;
      --color-surface-2: #ebedf4;
      --color-border: #dde1eb;
      --color-text: #171b28;
      --color-text-muted: #5c6478;
      --color-primary: #2f5da3;
      --color-primary-hover: #264d88;
      --color-on-primary: #ffffff;
      --color-primary-soft: #e4ecfa;
      --color-focus: #1f5fd1;
      --color-success: #1a7a4c;
      --color-success-soft: #e3f5ec;
      --color-warning: #93590a;
      --color-warning-soft: #fbf0dc;
      --color-danger: #b23b3b;
      --color-danger-soft: #fbe9e9;
      --color-cal-portfolio: #2f5da3;
      --color-cal-exam: #b23b3b;
      --color-cal-other: #565a76;
      --color-subject-aoo: #2f5da3;
      --color-subject-aoo-soft: #e4ecfa;
      --color-subject-sd: #0f7a5c;
      --color-subject-sd-soft: #e1f3ea;
      --color-subject-sbc: #96591f;
      --color-subject-sbc-soft: #f6ecd9;
      --color-subject-other: #565a76;
      --color-subject-other-soft: #e7e8f1;
      --color-code-bg: #171c28;
      --color-code-text: #d8ddf0;
      --color-overlay: rgb(255 255 255 / 0.9);
      --color-shadow: rgb(20 24 38 / 0.14);
      --color-shadow-soft: rgb(20 24 38 / 0.05);
    }

    :root[data-palette='cvd'] {
      --color-success: #007857;
      --color-success-soft: #e0f2ec;
      --color-warning: #746c09;
      --color-warning-soft: #f7f3d6;
      --color-danger: #ae427e;
      --color-danger-soft: #f7e6ef;
      --color-cal-portfolio: #0072b2;
      --color-cal-exam: #d55e00;
      --color-cal-other: #6b6b6b;
    }
  }
}