/* Tokens de design — a única fonte de cores, fontes, raios e sombras.
 *
 * Linguagem visual inspirada nas Human Interface Guidelines da Apple:
 * tipografia do sistema, superfícies "agrupadas", cores semânticas (azul ação,
 * verde ok, laranja atenção, vermelho erro) e modo claro/escuro pelo sistema.
 * Para mudar a aparência, mexa só aqui. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Cascadia Code", monospace;

  /* Cores semânticas (iOS system colors) */
  --blue: #007aff;
  --blue-deep: #0071e3;
  --green: #34c759;
  --orange: #ff9500;
  --red: #ff3b30;
  --purple: #af52de;
  --teal: #30b0c7;
  --indigo: #5856d6;
  --gray: #8e8e93;

  /* Superfícies (grouped background) */
  --bg: #f5f5f7;
  --bg-elev: #ffffff;
  --bg-inset: #f2f2f7;
  --bg-hover: rgba(0, 0, 0, 0.035);
  --bg-selected: rgba(0, 122, 255, 0.10);
  --separator: rgba(60, 60, 67, 0.14);
  --separator-strong: rgba(60, 60, 67, 0.28);
  --label: #1d1d1f;
  --label-2: #6e6e73;
  --label-3: #aeaeb2;
  --toolbar: rgba(245, 245, 247, 0.78);
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px -12px rgba(0, 0, 0, .18);
  --shadow-sheet: 0 20px 60px -20px rgba(0, 0, 0, .35);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --control-h: 32px;

  /* Tintas (fundos translúcidos das cores semânticas) */
  --tint-blue: rgba(0, 122, 255, .12);
  --tint-green: rgba(52, 199, 89, .14);
  --tint-orange: rgba(255, 149, 0, .16);
  --tint-red: rgba(255, 59, 48, .14);
  --tint-purple: rgba(175, 82, 222, .14);
  --tint-teal: rgba(48, 176, 199, .16);
  --tint-indigo: rgba(88, 86, 214, .14);
  --tint-gray: rgba(142, 142, 147, .16);

  /* Realce de JSON */
  --code-key: #a626a4;
  --code-str: #50a14f;
  --code-num: #986801;
  --code-bool: #0184bc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --blue: #0a84ff;
    --blue-deep: #0a84ff;
    --green: #30d158;
    --orange: #ff9f0a;
    --red: #ff453a;
    --purple: #bf5af2;
    --teal: #40c8e0;
    --indigo: #5e5ce6;

    --bg: #000000;
    --bg-elev: #1c1c1e;
    --bg-inset: #2c2c2e;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-selected: rgba(10, 132, 255, 0.22);
    --separator: rgba(84, 84, 88, 0.55);
    --separator-strong: rgba(84, 84, 88, 0.9);
    --label: #f5f5f7;
    --label-2: #98989d;
    --label-3: #636366;
    --toolbar: rgba(28, 28, 30, 0.72);
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px -16px rgba(0, 0, 0, .9);
    --shadow-sheet: 0 24px 80px -20px rgba(0, 0, 0, .9);

    --tint-blue: rgba(10, 132, 255, .22);
    --tint-green: rgba(48, 209, 88, .2);
    --tint-orange: rgba(255, 159, 10, .22);
    --tint-red: rgba(255, 69, 58, .22);
    --tint-purple: rgba(191, 90, 242, .22);
    --tint-teal: rgba(64, 200, 224, .22);
    --tint-indigo: rgba(94, 92, 230, .22);
    --tint-gray: rgba(142, 142, 147, .22);

    --code-key: #c678dd;
    --code-str: #98c379;
    --code-num: #d19a66;
    --code-bool: #56b6c2;
  }
}