/* ============================================================
   tokens.css — variáveis de design (cores, tipografia, espaçamento)
   ============================================================ */

:root {
  /* ----- Tipografia ----- */
  --fonte-ui:   'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fonte-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-xxs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 26px;
  --fs-3xl: 34px;
  --fs-4xl: 44px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ----- Densidade (sobrescrito pelo Tweaks) ----- */
  --row-h: 40px;
  --pad-cell: 10px 12px;
  --gap-md: 16px;
  --gap-lg: 20px;
  --card-pad: 18px 20px;

  /* ----- Cor primária (sobrescrito pelo Tweaks) ----- */
  --acento-h: 250;
  --acento:        oklch(0.62 0.19 var(--acento-h));
  --acento-hover:  oklch(0.56 0.20 var(--acento-h));
  --acento-soft:   oklch(0.62 0.19 var(--acento-h) / 0.12);
  --acento-fg:     #ffffff;

  /* ----- Bordas e raios ----- */
  --raio-sm: 4px;
  --raio-md: 6px;
  --raio-lg: 10px;

  /* ----- Sombra ----- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.03);
  --shadow-md: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);

  /* ----- Transições ----- */
  --t-rapida: 120ms ease;
  --t-media:  200ms ease;
}

/* ----- Tema claro ----- */
[data-tema="claro"] {
  --bg:           #f6f7f9;
  --bg-elevated:  #ffffff;
  --bg-sunken:    #eef0f3;
  --bg-hover:     #f0f2f5;
  --bg-row-alt:   #fafbfc;

  --border:        #e3e6eb;
  --border-strong: #c8ccd3;
  --border-focus:  var(--acento);

  --text:         #1a1d22;
  --text-muted:   #5b6270;
  --text-subtle:  #8a909c;
  --text-inverse: #ffffff;

  --positive:     oklch(0.55 0.14 150);
  --positive-soft: oklch(0.55 0.14 150 / 0.12);
  --negative:     oklch(0.55 0.18 25);
  --negative-soft: oklch(0.55 0.18 25 / 0.12);
  --warning:      oklch(0.70 0.15 75);
  --warning-soft: oklch(0.70 0.15 75 / 0.15);

  --grade:        #eef0f3;
  --eixo:         #b9bec7;
  --eixo-texto:   #6b727f;

  --tooltip-bg:   #1a1d22;
  --tooltip-fg:   #f6f7f9;
}

/* ----- Tema escuro ----- */
[data-tema="escuro"] {
  --bg:           #0e1014;
  --bg-elevated:  #16191f;
  --bg-sunken:    #0a0c10;
  --bg-hover:     #1d2128;
  --bg-row-alt:   #14171c;

  --border:        #242832;
  --border-strong: #353a45;
  --border-focus:  var(--acento);

  --text:         #e8eaee;
  --text-muted:   #9aa1ad;
  --text-subtle:  #6b727f;
  --text-inverse: #0e1014;

  --positive:     oklch(0.70 0.15 150);
  --positive-soft: oklch(0.70 0.15 150 / 0.16);
  --negative:     oklch(0.68 0.20 25);
  --negative-soft: oklch(0.68 0.20 25 / 0.16);
  --warning:      oklch(0.78 0.15 75);
  --warning-soft: oklch(0.78 0.15 75 / 0.18);

  --grade:        #1f232b;
  --eixo:         #353a45;
  --eixo-texto:   #8a909c;

  --tooltip-bg:   #f6f7f9;
  --tooltip-fg:   #1a1d22;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 1px 3px rgba(0,0,0,.40), 0 6px 16px rgba(0,0,0,.30);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.50);
}

/* ----- Densidade ----- */
[data-densidade="compacto"] {
  --row-h: 32px;
  --pad-cell: 6px 10px;
  --gap-md: 12px;
  --gap-lg: 14px;
  --card-pad: 12px 14px;
  --fs-md: 13px;
  --fs-sm: 12px;
}
[data-densidade="espacoso"] {
  --row-h: 52px;
  --pad-cell: 14px 18px;
  --gap-md: 22px;
  --gap-lg: 28px;
  --card-pad: 24px 28px;
  --fs-md: 15px;
}