/* NeuraPRO Design Tokens - copia desde docs/FIGMA/tokens.build.css para servir en /portal-static. No modificar tokens.source.json ni tokens.components.json. */
:root {
  /* Colors */
  --color-primary: #1976D2;
  --color-primary-hover: #1565C0;
  --color-secondary: #0ACFFB;

  --color-surface: #FFFFFF;
  --color-surface-alt: #F1F5F9;
  --color-background: #F8FAFC;
  --color-input-background: #FAFBFB;

  --color-sidebar: #091929;
  --color-sidebar-alt: #09223C;

  --color-border: #E2E8F0;
  --color-border-input: #CFE3E7;
  --color-border-subtle: #F1F5F9;

  --color-text-primary: #091929;
  --color-text-secondary: #64748B;
  --color-text-tertiary: #94A3B8;
  --color-text-heading: #1E293B;
  --color-text-inverse: #FFFFFF;

  --color-alert-success: #22C55E;
  --color-alert-warning: #F59E0B;
  --color-alert-error: #EF4444;
  --color-alert-info: #3B82F6;

  /* Spacing */
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Elevation */
  --elevation-card: 0px 4px 12px rgba(0,0,0,0.06);
  --elevation-hover: 0px 6px 16px rgba(0,0,0,0.08);
  --elevation-modal: 0px 8px 24px rgba(0,0,0,0.12);

  /* Sizes */
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;

  --size-button-sm-height: 36px;
  --size-button-sm-padding-x: 16px;
  --size-button-sm-padding-y: 8px;

  --size-button-md-height: 44px;
  --size-button-md-padding-x: 24px;
  --size-button-md-padding-y: 12px;

  --size-input-height: 50px;
  --size-input-padding-x: 15px;
  --size-input-padding-y: 14px;

  /* Font family */
  --font-family-base: "DM Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

  /* Typography (as CSS-friendly primitives) */
  --type-h1-size: 32px;
  --type-h1-line: 40px;
  --type-h1-weight: 700;
  --type-h1-tracking: -0.01em;

  --type-h2-size: 24px;
  --type-h2-line: 32px;
  --type-h2-weight: 700;
  --type-h2-tracking: 0;

  --type-h3-size: 20px;
  --type-h3-line: 28px;
  --type-h3-weight: 600;
  --type-h3-tracking: 0;

  --type-body-lg-size: 16px;
  --type-body-lg-line: 24px;
  --type-body-lg-weight: 400;

  --type-body-size: 14px;
  --type-body-line: 20px;
  --type-body-weight: 400;

  --type-body-sm-size: 12px;
  --type-body-sm-line: 16px;
  --type-body-sm-weight: 400;

  --type-caption-size: 12px;
  --type-caption-line: 16px;
  --type-caption-weight: 600;
  --type-caption-tracking: 0.05em;

  --type-button-size: 14px;
  --type-button-line: 20px;
  --type-button-weight: 600;
  --type-button-tracking: 0;
}

/* OPTIONAL: Component vars (makes templates cleaner) */
:root {
  --button-radius: var(--radius-sm);
  --button-gap: var(--spacing-2);

  --button-disabled-bg: var(--color-surface-alt);
  --button-disabled-text: var(--color-text-tertiary);
  --button-disabled-border: var(--color-border);

  --button-focus-ring-color: var(--color-alert-info);
  --button-focus-ring-width: 3px;
  --button-focus-ring-offset: 2px;
  --button-focus-ring-offset-color: var(--color-background);

  --button-primary-bg: var(--color-primary);
  --button-primary-bg-hover: var(--color-primary-hover);
  --button-primary-text: var(--color-text-inverse);

  --button-secondary-bg: var(--color-secondary);
  --button-secondary-text: var(--color-text-primary);

  --button-ghost-bg-hover: var(--color-surface-alt);
  --button-ghost-text: var(--color-text-primary);

  --table-bg: var(--color-surface);
  --table-border: var(--color-border);
  --table-radius: var(--radius-lg);
  --table-shadow: var(--elevation-card);

  --table-header-text: var(--color-text-tertiary);
  --table-row-hover-bg: var(--color-surface-alt);

  --tabs-indicator: var(--color-primary);
  --tabs-text-default: var(--color-text-secondary);
  --tabs-text-active: var(--color-text-primary);
}