/* Tokens de diseño — marca blanca.
   Cada nivel (red, agencia, negocio) sobrescribe solo el bloque [data-brand].
   Los componentes nunca usan valores literales: solo var(--*). */

:root, [data-brand] {
  /* Tipografía */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-heading: var(--font-sans); /* el personalizador permite fuente de títulos distinta */
  --text-xs: 12px;   --lh-xs: 16px;
  --text-sm: 13px;   --lh-sm: 20px;
  --text-base: 14px; --lh-base: 22px;
  --text-md: 16px;   --lh-md: 24px;
  --text-lg: 18px;   --lh-lg: 28px;
  --text-xl: 22px;   --lh-xl: 30px;
  --text-2xl: 28px;  --lh-2xl: 36px;
  --text-3xl: 36px;  --lh-3xl: 44px;
  --text-4xl: 48px;  --lh-4xl: 56px;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  --tracking-tight: -0.02em; --tracking-normal: 0;

  /* Espaciado (base 4) */
  --space-0: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* Radios */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-full: 999px;

  /* Tamaños de control */
  --control-sm: 28px; --control-md: 34px; --control-lg: 40px;
  --sidebar-width: 256px; --topbar-height: 56px;

  /* Movimiento */
  --ease: cubic-bezier(.2,.8,.2,1); --duration-fast: 120ms; --duration: 180ms;

  /* Neutros — claro */
  --bg: #FFFFFF;
  --bg-subtle: #FAFAFA;
  --bg-muted: #F4F4F5;
  --bg-hover: #F4F4F5;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --border: #E8E8EB;
  --border-strong: #D4D4D8;
  --text: #0A0A0B;
  --text-secondary: #52525B;
  --text-tertiary: #71717A;
  --text-disabled: #A1A1AA;
  --overlay: rgb(10 10 11 / 0.32);

  /* Estados semánticos */
  --success: #15803D; --success-subtle: #EFFAF2;
  --warning: #A15C07; --warning-subtle: #FEF7E6;
  --danger:  #D92D20; --danger-subtle:  #FEF1F0;
  --info:    #3F3F46; --info-subtle:    #F4F4F5;
  --danger-solid: #D92D20; /* relleno de botón destructivo, texto blanco AA en ambos modos */

  /* Sombras — mínimas */
  --shadow-xs: 0 1px 2px rgb(10 10 11 / 0.04);
  --shadow-sm: 0 1px 2px rgb(10 10 11 / 0.05), 0 0 0 1px rgb(10 10 11 / 0.03);
  --shadow-md: 0 6px 16px -6px rgb(10 10 11 / 0.10), 0 0 0 1px rgb(10 10 11 / 0.04);
  --shadow-lg: 0 24px 48px -16px rgb(10 10 11 / 0.18), 0 0 0 1px rgb(10 10 11 / 0.05);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-ui, var(--accent));

  /* Acento — por defecto: red Marketcat */
  --accent: #1F5BFF;
  --accent-hover: #1A4DE0;
  --accent-subtle: #EEF3FF;
  --accent-text: #1F5BFF;
  --accent-contrast: #FFFFFF;
}

[data-mode="light"] { color-scheme: light; }
/* Modo oscuro — neutros */
[data-mode="dark"] {
  color-scheme: dark;
  --bg: #0B0B0C;
  --bg-subtle: #111113;
  --bg-muted: #18181B;
  --bg-hover: #1C1C20;
  --surface: #111113;
  --surface-raised: #17171A;
  --border: #232327;
  --border-strong: #303036;
  --text: #EDEDEF;
  --text-secondary: #A8A8B0;
  --text-tertiary: #8B8B94;
  --text-disabled: #5A5A62;
  --overlay: rgb(0 0 0 / 0.6);
  --success: #4ADE80; --success-subtle: rgb(74 222 128 / 0.10);
  --warning: #FBBF24; --warning-subtle: rgb(251 191 36 / 0.10);
  --danger:  #F87171; --danger-subtle:  rgb(248 113 113 / 0.10);
  --info:    #D4D4D8; --info-subtle:    rgb(212 212 216 / 0.08);
  --shadow-xs: none;
  --shadow-sm: 0 0 0 1px rgb(255 255 255 / 0.04);
  --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.06);
  --shadow-lg: 0 24px 64px -16px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.08);
  --accent-subtle: rgb(31 91 255 / 0.16);
  --accent-text: #7FA0FF;
}

/* Marcas de ejemplo — lo que una agencia o negocio cambia en "Marca" */
[data-brand="nodo"] {
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --accent: #0F766E; --accent-hover: #0B5F58; --accent-subtle: #E8F5F3; --accent-text: #0F766E;
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px;
}
[data-brand="nodo"][data-mode="dark"] { --accent-subtle: rgb(20 184 166 / 0.14); --accent-text: #5EEAD4; }

[data-brand="lumen"] {
  --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --accent: #B4532A; --accent-hover: #963F1B; --accent-subtle: #FBF0EA; --accent-text: #A84B24;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px;
}
[data-brand="lumen"][data-mode="dark"] { --accent-subtle: rgb(240 162 127 / 0.14); --accent-text: #F0A27F; }