/* core/tokens.css — Design system dos mini apps X Drop
   Fonte da verdade: ~/webdrops/plataforma/PLATAFORMA.md.
   Convenção: TODA cor/raio/fonte vira custom property --wd-*.
   Nenhum arquivo do app deve declarar cores por literal. */

:root {
  /* Tipografia */
  --wd-display: 'Cousine', ui-monospace, 'Courier New', monospace;
  --wd-body: 'Inter', system-ui, sans-serif;

  /* Raios */
  --wd-r-md: 8px;
  --wd-r-lg: 12px;
  --wd-r-full: 9999px;

  /* Espaçamento (escala enxuta) */
  --wd-s-xs: 4px;
  --wd-s-sm: 8px;
  --wd-s-md: 12px;
  --wd-s-lg: 16px;
  --wd-s-xl: 24px;

  /* Semânticas fixas (não variam por tema) */
  --wd-danger: #BE2D2D;
  --wd-danger-hover: #d64545;
  --wd-success: #008000;
  --wd-success-light: #3fbf5f;

  /* Focus ring derivado do accent (tokenizado — nada de rgba hardcoded) */
  --wd-focus-ring: 0 0 0 2px color-mix(in srgb, var(--wd-accent) 15%, transparent);
  --wd-overlay: color-mix(in srgb, var(--wd-bg) 80%, black);
  --wd-accent-tint-06: color-mix(in srgb, var(--wd-accent) 6%, transparent);
  --wd-accent-tint-10: color-mix(in srgb, var(--wd-accent) 10%, transparent);
  --wd-accent-tint-15: color-mix(in srgb, var(--wd-accent) 15%, transparent);
}

/* ============ Tema DARK (canvas padrão da plataforma) ============
   Base padrão = navy. Apps trocam a base com data-base em <html>
   (ver blocos abaixo) e o accent em app/config.js. */
:root,
[data-theme="dark"] {
  --wd-bg: #00131F;
  --wd-surface: #002539;
  --wd-surface-2: #00304A;
  --wd-rule: rgba(170, 180, 202, .22);
  --wd-rule-dark: rgba(170, 180, 202, .16);
  --wd-text: #F1F1F1;
  --wd-text-2: #AAB4CA;
  --wd-primary: #005480;
  --wd-secondary: #009CFF;
  --wd-on-accent: #00131F;
}

/* Bases por app (só as neutras mudam; design é idêntico) */
[data-theme="dark"][data-base="green"] {
  --wd-bg: #001405;
  --wd-surface: #002B08;
  --wd-surface-2: #003F00;
}
[data-theme="dark"][data-base="red"] {
  --wd-bg: #140505;
  --wd-surface: #2B0D0D;
  --wd-surface-2: #3F1212;
  --wd-rule: rgba(214, 178, 178, .18);
  --wd-rule-dark: rgba(214, 178, 178, .12);
  --wd-text-2: #C9A8A8;
}

/* ============ Tema LIGHT (opcional por app — config.themeToggle) ============ */
[data-theme="light"] {
  --wd-bg: #F1F1F1;
  --wd-surface: #FFFFFF;
  --wd-surface-2: #F7F7F7;
  --wd-rule: #E3E3E3;
  --wd-rule-dark: rgba(0, 0, 0, .12);
  --wd-text: #0A0A0A;
  --wd-text-2: #5A6472;
  --wd-primary: #005480;
  --wd-secondary: #009CFF;
  --wd-on-accent: #FFFFFF;
}
[data-theme="light"][data-base="red"] {
  --wd-surface-2: #F7ECEC;
  --wd-rule: #E3D3D3;
  --wd-rule-dark: rgba(82, 20, 20, .14);
  --wd-text-2: #8A5F5F;
}

/* Accent por app: declarado em app/app.css (única linha):
   :root { --wd-accent: #009CFF; --wd-accent-hover: #33B1FF; }
   Defaults aqui embaixo são do Tracker (azul) pra nunca faltar accent. */
:root {
  --wd-accent: #009CFF;
  --wd-accent-hover: #33B1FF;
}