/* Design tokens compartidos de los paneles admin (derivados de ComunaClick tokens.css) */
:root {
  /* Color - marca */
  --color-primary: #2d9e4f;
  --color-primary-dim: #1f7a3b;
  --color-primary-container: #dcfce7;
  --color-on-primary: #ecfdf5;
  --color-on-primary-container: #14532d;
  --color-brand-accent: #22c55e;

  /* Color - acento calido */
  --color-accent-warm: #f59e0b;
  --color-accent-warm-container: #fef3c7;
  --color-on-accent-warm: #78350f;

  /* Superficies / neutros (MD3) */
  --color-surface: #fffdf7;
  --color-surface-bright: #ffffff;
  --color-surface-container: #f6f1e8;
  --color-surface-container-low: #faf4ea;
  --color-surface-container-high: #f0ebe2;
  --color-surface-dim: #e7e1d6;
  --color-on-surface: #111816;
  --color-on-surface-variant: #58615d;
  --color-outline: #757778;
  --color-outline-variant: #e8e5dc;
  --color-background: #fffdf7;

  /* Estado */
  --color-error: #b02500;
  --color-error-container: #fee2e2;
  --color-on-error-container: #991b1b;

  /* Badges de estado */
  --status-success-bg: #dcfce7;
  --status-success-fg: #166534;
  --status-warning-bg: #fef3c7;
  --status-warning-fg: #92400e;
  --status-error-bg: #fee2e2;
  --status-error-fg: #991b1b;
  --status-neutral-bg: #f1f5f9;
  --status-neutral-fg: #334155;

  /* Tipografia */
  --font-sans: 'Inter', sans-serif;
  --font-headline: 'Manrope', sans-serif;

  /* Radios */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1.125rem;
  --radius-2xl: 1.375rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-card: 0 24px 60px -40px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 12px 34px -24px rgba(45, 158, 79, 0.45);
  --shadow-elevated: 0 24px 64px -12px rgba(0, 0, 0, 0.35);

  /* Alias legacy usados por overrides de cada panel */
  --payments-bg: var(--color-background);
  --payments-surface: var(--color-surface-bright);
  --payments-muted: var(--color-on-surface-variant);
  --payments-text: var(--color-on-surface);
  --payments-green: var(--color-primary);
  --payments-green-soft: var(--color-primary-container);
  --payments-border: var(--color-outline-variant);
}
