/* ============================================================================
   tokens.css — FONTE ÚNICA de cores do projeto (Serotonina DS / TotalPass).
   Marca primária = TotalFit / Endorphin (verde).

   COMO TROCAR UMA COR: edite a linha do primitivo aqui (UMA linha) e pronto —
   classes Tailwind (bg-, text-, border-), CSS, estilos inline e graficos
   atualizam juntos, EM RUNTIME, sem recompilar o Tailwind.

   PADRÃO (oficial Tailwind v3 — docs "Using CSS variables"):
   primitivos são CANAIS RGB separados por espaço, SEM rgb()/#, para que os
   modificadores de opacidade (ex.: bg-emerald-500/10) funcionem via <alpha-value>.
     - Uso em classe Tailwind: o tailwind.config.js faz rgb(var(--tp-x) / <alpha-value>)
     - Uso direto em CSS/inline: rgb(var(--tp-x))  ou os aliases semânticos --tp-color-*
   Referenciado por: tailwind.config.js, style.css, dashboard.css, estilos inline e Chart.js.
   ============================================================================ */
:root {
  /* ---- Endorphin (verde — TotalFit / marca primária) ---- */
  --tp-endorphin-50:  233 255 235;
  --tp-endorphin-100: 169 243 190;
  --tp-endorphin-200: 64 225 139;
  --tp-endorphin-300: 2 196 114;
  --tp-endorphin-400: 0 166 95;
  --tp-endorphin-500: 0 137 78;
  --tp-endorphin-600: 0 109 61;
  --tp-endorphin-700: 0 82 44;
  --tp-endorphin-800: 0 57 29;
  --tp-endorphin-900: 0 33 15;
  --tp-endorphin-950: 5 19 13;

  /* ---- Synapse (roxo — marca secundária) ---- */
  --tp-synapse-50:  248 237 255;
  --tp-synapse-100: 238 220 255;
  --tp-synapse-200: 216 185 255;
  --tp-synapse-300: 195 150 255;
  --tp-synapse-400: 175 113 255;
  --tp-synapse-500: 151 78 242;
  --tp-synapse-600: 125 47 215;
  --tp-synapse-700: 99 0 187;
  --tp-synapse-800: 69 0 134;
  --tp-synapse-900: 41 0 84;
  --tp-synapse-950: 19 6 34;

  /* ---- Pulse (rosa — marca terciária) ---- */
  --tp-pulse-50:  252 228 236;
  --tp-pulse-100: 248 187 208;
  --tp-pulse-200: 244 143 177;
  --tp-pulse-300: 240 98 146;
  --tp-pulse-400: 236 64 122;
  --tp-pulse-500: 233 30 99;
  --tp-pulse-600: 216 27 96;
  --tp-pulse-700: 194 24 91;
  --tp-pulse-800: 173 20 87;
  --tp-pulse-900: 136 14 79;
  --tp-pulse-950: 50 11 33;

  /* ---- Cinzas teal-tinted (escala completa do DS) ---- */
  --tp-gray-000: 255 255 255;
  --tp-gray-010: 250 253 252;
  --tp-gray-020: 247 250 249;
  --tp-gray-040: 242 244 244;
  --tp-gray-050: 239 241 241;
  --tp-gray-060: 236 238 238;
  --tp-gray-100: 224 227 227;
  --tp-gray-200: 196 199 199;
  --tp-gray-300: 169 172 172;
  --tp-gray-400: 142 145 145;
  --tp-gray-500: 116 120 120;
  --tp-gray-600: 92 95 95;
  --tp-gray-650: 80 83 83;
  --tp-gray-700: 68 71 71;
  --tp-gray-750: 56 60 60;
  --tp-gray-760: 54 58 58;
  --tp-gray-780: 50 53 53;
  --tp-gray-800: 45 49 49;
  --tp-gray-830: 34 38 38;
  --tp-gray-880: 29 32 32;
  --tp-gray-900: 25 28 28;
  --tp-gray-940: 16 20 20;
  --tp-gray-950: 14 18 18;
  --tp-gray-960: 11 15 15;
  --tp-gray-999: 0 0 0;

  /* ---- Status: Blue (info) ---- */
  --tp-blue-50:  225 245 254;
  --tp-blue-100: 179 229 252;
  --tp-blue-200: 129 212 250;
  --tp-blue-300: 79 195 247;
  --tp-blue-400: 41 182 246;
  --tp-blue-500: 3 169 244;
  --tp-blue-600: 3 155 229;
  --tp-blue-700: 2 136 209;
  --tp-blue-800: 2 119 189;
  --tp-blue-900: 1 87 155;
  --tp-blue-950: 6 34 57;

  /* ---- Status: Red (error) ---- */
  --tp-red-50:  254 235 238;
  --tp-red-100: 254 205 210;
  --tp-red-200: 239 154 154;
  --tp-red-300: 229 115 115;
  --tp-red-400: 239 83 80;
  --tp-red-500: 244 67 54;
  --tp-red-600: 229 57 53;
  --tp-red-700: 211 47 47;
  --tp-red-800: 198 40 40;
  --tp-red-900: 183 28 28;
  --tp-red-950: 74 8 8;

  /* ---- Status: Amber (warning) ---- */
  --tp-amber-50:  255 253 231;
  --tp-amber-100: 255 249 196;
  --tp-amber-200: 255 245 157;
  --tp-amber-300: 255 241 118;
  --tp-amber-400: 255 238 88;
  --tp-amber-500: 255 235 59;
  --tp-amber-600: 253 216 53;
  --tp-amber-700: 251 192 45;
  --tp-amber-800: 249 168 37;
  --tp-amber-900: 245 127 23;
  --tp-amber-950: 74 40 0;

  /* ---- Status: Green (success) ---- */
  --tp-green-50:  232 245 233;
  --tp-green-100: 200 230 201;
  --tp-green-200: 165 214 167;
  --tp-green-300: 129 199 132;
  --tp-green-400: 102 187 106;
  --tp-green-500: 76 175 80;
  --tp-green-600: 67 160 71;
  --tp-green-700: 56 142 60;
  --tp-green-800: 46 125 50;
  --tp-green-900: 27 94 32;
  --tp-green-950: 15 36 18;

  /* ============================================================
     SEMÂNTICOS — cores PRONTAS (rgb()) p/ uso direto em CSS/inline/charts.
     Modo ESCURO no :root (padrão da plataforma); override claro abaixo.
     ============================================================ */
  --tp-color-primary-main:     rgb(var(--tp-endorphin-200));
  --tp-color-primary-dark:     rgb(var(--tp-endorphin-300));
  --tp-color-primary-light:    rgb(var(--tp-endorphin-100));
  --tp-color-primary-contrast: rgb(var(--tp-endorphin-950));

  /* Marca secundária/terciária (TotalFit — TOKENS.md) */
  --tp-color-secondary-main:   rgb(var(--tp-synapse-200));  /* Synapse 200 #d8b9ff */
  --tp-color-tertiary-main:    rgb(var(--tp-pulse-200));    /* Pulse 200 #f48fb1 */

  --tp-color-surface-background: rgb(var(--tp-gray-999));
  --tp-color-surface-default:    rgb(var(--tp-gray-940));
  --tp-color-surface-raised:     rgb(var(--tp-gray-900));
  --tp-color-surface-overlay:    rgb(var(--tp-gray-880));

  --tp-color-text-primary:     rgb(var(--tp-gray-050));
  --tp-color-text-secondary:   rgb(var(--tp-gray-400));
  --tp-color-text-placeholder: rgb(var(--tp-gray-600));
  --tp-color-text-inverse:     rgb(var(--tp-gray-900));

  --tp-color-border-default: rgb(var(--tp-gray-700));
  --tp-color-border-subtle:  rgb(var(--tp-gray-800));
  --tp-color-scheme: dark;

  /* ============================================================
     FOUNDATION TOKENS — espacamento, raio, blur e sombra
     Base semantica para componentes compartilhados.
     ============================================================ */
  --tp-space-4: 4px;
  --tp-space-8: 8px;
  --tp-space-12: 12px;
  --tp-space-16: 16px;
  --tp-space-24: 24px;

  --tp-radius-4: 4px;
  --tp-radius-8: 8px;
  --tp-radius-12: 12px;
  --tp-radius-16: 16px;
  --tp-radius-18: 18px;
  --tp-radius-24: 24px;

  --tp-blur-glass: 22px;
  --tp-blur-overlay: 8px;

  --tp-shadow-control: 0 10px 28px rgb(var(--tp-gray-999) / 0.32);
  --tp-shadow-card: 0 20px 44px rgb(var(--tp-gray-999) / 0.28);
  --tp-shadow-overlay: 0 28px 80px rgb(var(--tp-gray-999) / 0.56);

  /* Componentes — camada semantica da experiencia Total Agents.
     Mantem a paleta no DS e concentra composicao, contraste e profundidade. */
  --tp-component-canvas: rgb(var(--tp-gray-999));
  --tp-component-surface: rgb(var(--tp-gray-999) / 0.92);
  --tp-component-surface-subtle: rgb(var(--tp-gray-940) / 0.78);
  --tp-component-surface-raised: rgb(var(--tp-gray-999) / 0.96);
  --tp-component-surface-hover: rgb(var(--tp-gray-900) / 0.9);
  --tp-component-surface-active: rgb(var(--tp-endorphin-200) / 0.08);
  --tp-component-border: rgb(var(--tp-gray-400) / 0.18);
  --tp-component-border-soft: rgb(var(--tp-gray-500) / 0.16);
  --tp-component-border-strong: rgb(var(--tp-endorphin-200) / 0.32);
  --tp-component-text: rgb(var(--tp-gray-050));
  --tp-component-text-muted: rgb(var(--tp-gray-300));
  --tp-component-caption: rgb(var(--tp-gray-500));
  --tp-component-focus: rgb(var(--tp-endorphin-200) / 0.58);
  --tp-component-focus-soft: rgb(var(--tp-endorphin-200) / 0.12);
  --tp-component-backdrop: rgb(var(--tp-gray-999) / 0.84);
  --tp-component-skeleton-base: rgb(var(--tp-gray-880) / 0.92);
  --tp-component-skeleton-highlight: rgb(var(--tp-gray-760) / 0.96);
  --tp-component-highlight: inset 0 1px rgb(var(--tp-gray-000) / 0.07);
  --tp-component-shadow-control: var(--tp-shadow-control);
  --tp-component-shadow-card: var(--tp-shadow-card);
  --tp-component-shadow-overlay: var(--tp-shadow-overlay);
  --tp-component-radius-control: var(--tp-radius-8);
  --tp-component-radius-subcard: var(--tp-radius-12);
  --tp-component-radius-card: var(--tp-radius-18);
  /* Background ambiental da aplicacao — baseado no shell do Total Agents. */
  --tp-app-background: rgb(8 11 9);
  --tp-app-orb-sidebar: rgb(61 224 138 / 0.066);
  --tp-app-orb-green: rgb(61 224 138 / 0.064);
  --tp-app-orb-purple: rgb(138 56 245 / 0.21);
  --tp-app-grain-opacity: 0.145;
  --tp-app-grain-blend: overlay;
  --tp-app-frame-shadow:
    inset 0 1px rgb(var(--tp-gray-000) / 0.025),
    inset 0 0 88px rgb(var(--tp-gray-999) / 0.2);

  /* Status (papéis) — cores prontas */
  --tp-success-main:  rgb(var(--tp-green-400));
  --tp-success-light: rgb(var(--tp-green-300));
  --tp-error-main:    rgb(var(--tp-red-500));
  --tp-error-light:   rgb(var(--tp-red-300));
  --tp-error-dark:    rgb(var(--tp-red-700));
  --tp-warning-main:  rgb(var(--tp-amber-400));
  --tp-info-main:     rgb(var(--tp-blue-400));
  --tp-color-success-main: rgb(var(--tp-green-400));
  --tp-color-error-main:   rgb(var(--tp-red-500));
  --tp-color-error-light:  rgb(var(--tp-red-300));
  --tp-color-warning-main: rgb(var(--tp-amber-400));
  --tp-color-info-main:    rgb(var(--tp-blue-400));
}

/* ---- Semânticos: override modo CLARO ----
   DS usa [data-mode="light"]; algumas superfícies usam [data-theme="light"]. */
[data-mode="light"], [data-theme="light"] {
  --tp-color-primary-main:     rgb(var(--tp-endorphin-500));
  --tp-color-primary-dark:     rgb(var(--tp-endorphin-600));
  --tp-color-primary-light:    rgb(var(--tp-endorphin-400));
  --tp-color-primary-contrast: rgb(var(--tp-endorphin-50));

  --tp-color-surface-background: rgb(var(--tp-gray-000));
  --tp-color-surface-default:    rgb(var(--tp-gray-050));
  --tp-color-surface-raised:     rgb(var(--tp-gray-100));
  --tp-color-surface-overlay:    rgb(var(--tp-gray-200));

  --tp-color-text-primary:     rgb(var(--tp-gray-999));
  --tp-color-text-secondary:   rgb(var(--tp-gray-600));
  --tp-color-text-placeholder: rgb(var(--tp-gray-400));
  --tp-color-text-inverse:     rgb(var(--tp-gray-050));

  --tp-color-border-default: rgb(var(--tp-gray-200));
  --tp-color-border-subtle:  rgb(var(--tp-gray-100));
  --tp-color-scheme: light;

  --tp-component-canvas: rgb(var(--tp-gray-020));
  --tp-component-surface: rgb(var(--tp-gray-000) / 0.92);
  --tp-component-surface-subtle: rgb(var(--tp-gray-000) / 0.74);
  --tp-component-surface-raised: rgb(var(--tp-gray-000) / 0.96);
  --tp-component-surface-hover: rgb(var(--tp-gray-040) / 0.96);
  --tp-component-surface-active: rgb(var(--tp-endorphin-500) / 0.08);
  --tp-component-border: rgb(var(--tp-gray-700) / 0.14);
  --tp-component-border-soft: rgb(var(--tp-gray-600) / 0.12);
  --tp-component-border-strong: rgb(var(--tp-endorphin-500) / 0.26);
  --tp-component-text: rgb(var(--tp-gray-900));
  --tp-component-text-muted: rgb(var(--tp-gray-650));
  --tp-component-caption: rgb(var(--tp-gray-500));
  --tp-component-focus: rgb(var(--tp-endorphin-500) / 0.38);
  --tp-component-focus-soft: rgb(var(--tp-endorphin-500) / 0.08);
  --tp-component-backdrop: rgb(var(--tp-gray-020) / 0.78);
  --tp-component-skeleton-base: rgb(var(--tp-gray-060) / 0.92);
  --tp-component-skeleton-highlight: rgb(var(--tp-gray-100) / 0.98);
  --tp-component-highlight: inset 0 1px rgb(var(--tp-gray-000) / 0.92);
  --tp-shadow-control: 0 10px 24px rgb(var(--tp-gray-999) / 0.08);
  --tp-shadow-card: 0 22px 48px rgb(var(--tp-gray-999) / 0.12);
  --tp-shadow-overlay: 0 28px 72px rgb(var(--tp-gray-999) / 0.16);
  --tp-component-shadow-control: var(--tp-shadow-control);
  --tp-component-shadow-card: var(--tp-shadow-card);
  --tp-component-shadow-overlay: var(--tp-shadow-overlay);
  --tp-app-background: rgb(238 241 237);
  --tp-app-orb-sidebar: rgb(20 166 92 / 0.12);
  --tp-app-orb-green: rgb(20 166 92 / 0.24);
  --tp-app-orb-purple: rgb(110 85 201 / 0.32);
  --tp-app-grain-opacity: 0.095;
  --tp-app-grain-blend: multiply;
  --tp-app-frame-shadow:
    inset 0 1px rgb(var(--tp-gray-000) / 0.72),
    inset 0 0 82px rgb(var(--tp-gray-000) / 0.16);
}