/* ==========================================================================
   LEXA DESIGN SYSTEM - Theme Variables
   Version: 3.0 — Semantic Token Architecture
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     BRAND — Primary Purple
     -------------------------------------------------------------------------- */
  --lexa-primary: #6D28D9;
  --lexa-primary-hover: #5B21B6;
  --lexa-primary-active: #4C1D95;
  --lexa-primary-light: #EDE9FE;
  --lexa-primary-contrast: #ffffff;

  --lexa-primary-50: #F5F3FF;
  --lexa-primary-100: #EDE9FE;
  --lexa-primary-200: #C4B5FD;
  --lexa-primary-300: #A78BFA;
  --lexa-primary-400: #8B5CF6;
  --lexa-primary-500: #7C3AED;
  --lexa-primary-600: #6D28D9;
  --lexa-primary-700: #5B21B6;
  --lexa-primary-800: #4C1D95;
  --lexa-primary-900: #3B0764;

  /* Secondary */
  --lexa-secondary: #64748B;
  --lexa-secondary-hover: #475569;
  --lexa-secondary-light: #F1F5F9;
  --lexa-secondary-contrast: #ffffff;

  /* --------------------------------------------------------------------------
     NEUTRALS — Slate scale (light mode: low numbers = light)
     -------------------------------------------------------------------------- */
  --lexa-gray-900: #0F172A;
  --lexa-gray-800: #1E293B;
  --lexa-gray-700: #334155;
  --lexa-gray-600: #475569;
  --lexa-gray-500: #64748B;
  --lexa-gray-400: #94A3B8;
  --lexa-gray-300: #CBD5E1;
  --lexa-gray-200: #E2E8F0;
  --lexa-gray-100: #F1F5F9;
  --lexa-gray-50: #F8FAFC;
  --lexa-white: #ffffff;
  --lexa-black: #000000;

  /* --------------------------------------------------------------------------
     SEMANTIC STATES
     -------------------------------------------------------------------------- */

  /* Success */
  --lexa-success: #16A34A;
  --lexa-success-hover: #15803D;
  --lexa-success-light: #DCFCE7;
  --lexa-success-contrast: #ffffff;

  /* Warning */
  --lexa-warning: #F59E0B;
  --lexa-warning-hover: #D97706;
  --lexa-warning-light: #FEF3C7;
  --lexa-warning-contrast: #0F172A;

  /* Danger */
  --lexa-danger: #DC2626;
  --lexa-danger-hover: #B91C1C;
  --lexa-danger-light: #FEE2E2;
  --lexa-danger-contrast: #ffffff;

  /* Info */
  --lexa-info: #3B82F6;
  --lexa-info-hover: #2563EB;
  --lexa-info-light: #DBEAFE;
  --lexa-info-contrast: #ffffff;

  /* --------------------------------------------------------------------------
     BACKGROUNDS & SURFACES
     -------------------------------------------------------------------------- */
  --lexa-bg-body: #ffffff;
  --lexa-bg-subtle: #F8FAFC;
  --lexa-bg-muted: #F1F5F9;
  --lexa-border-color: #E2E8F0;
  --lexa-border-color-subtle: #F1F5F9;

  /* --------------------------------------------------------------------------
     SEMANTIC TOKENS — Mapped to scale values
     These are the ONLY tokens components should reference.
     In dark mode, these remap without inverting the gray scale.
     -------------------------------------------------------------------------- */

  /* Text */
  --lexa-text-primary: #0F172A;        /* Headings, strong labels */
  --lexa-text-secondary: #334155;      /* Body text */
  --lexa-text-tertiary: #64748B;       /* Captions, meta, timestamps */
  --lexa-text-disabled: #94A3B8;       /* Placeholders, disabled */
  --lexa-text-inverse: #ffffff;        /* On colored/brand backgrounds */
  --lexa-text-link: #6D28D9;          /* Interactive links */

  /* Surfaces (layered elevation) */
  --lexa-surface-base: #ffffff;        /* Page background */
  --lexa-surface-raised: #F8FAFC;      /* Cards, panels */
  --lexa-surface-overlay: #F1F5F9;     /* Modals, dropdowns, popovers */
  --lexa-surface-sunken: #F1F5F9;      /* Inputs, inset areas */
  --lexa-surface-hover: #F1F5F9;       /* Hover state on surface */
  --lexa-surface-active: #EDE9FE;      /* Active/selected state */

  /* Borders */
  --lexa-border-default: #E2E8F0;
  --lexa-border-strong: #CBD5E1;
  --lexa-border-subtle: #F1F5F9;

  /* State backgrounds (for alerts, banners, table-rows) */
  --lexa-state-warning-bg: #FEF3C7;
  --lexa-state-warning-text: #92400E;
  --lexa-state-danger-bg: #FEE2E2;
  --lexa-state-danger-text: #991B1B;
  --lexa-state-success-bg: #DCFCE7;
  --lexa-state-success-text: #166534;
  --lexa-state-info-bg: #DBEAFE;
  --lexa-state-info-text: #1E40AF;
  --lexa-state-neutral-bg: #F1F5F9;
  --lexa-state-neutral-text: #475569;

  /* Appointment status colors
     Confirmada = verde, Atendida = azul (convencion Reservo, pedido terapeutas 2026-04-16) */
  --lexa-status-scheduled: #64748B;
  --lexa-status-confirmed: #10B981;
  --lexa-status-rescheduled: #F97316;
  --lexa-status-inprogress: #0891B2;
  --lexa-status-attended: #3B82F6;
  --lexa-status-cancelled: #EF4444;
  --lexa-status-noshow: #6B7280;

  /* Outline buttons */
  --lexa-outline-primary: #6D28D9;
  --lexa-outline-success: #16A34A;
  --lexa-outline-danger: #DC2626;
  --lexa-outline-warning: #D97706;
  --lexa-outline-info: #2563EB;
  --lexa-outline-secondary: #64748B;

  /* --------------------------------------------------------------------------
     TIPOGRAFIA
     -------------------------------------------------------------------------- */
  --lexa-font-family-base: system-ui, -apple-system, "Segoe UI", Roboto,
                           "Helvetica Neue", Arial, sans-serif;
  --lexa-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas,
                           "Liberation Mono", "Courier New", monospace;

  --lexa-font-size-xs: 0.75rem;
  --lexa-font-size-sm: 0.875rem;
  --lexa-font-size-base: 1rem;
  --lexa-font-size-lg: 1.125rem;
  --lexa-font-size-xl: 1.25rem;
  --lexa-font-size-2xl: 1.5rem;
  --lexa-font-size-3xl: 1.875rem;
  --lexa-font-size-4xl: 2.25rem;

  --lexa-font-weight-light: 300;
  --lexa-font-weight-normal: 400;
  --lexa-font-weight-medium: 500;
  --lexa-font-weight-semibold: 600;
  --lexa-font-weight-bold: 700;

  --lexa-line-height-tight: 1.25;
  --lexa-line-height-base: 1.5;
  --lexa-line-height-relaxed: 1.75;

  /* --------------------------------------------------------------------------
     SPACING
     -------------------------------------------------------------------------- */
  --lexa-spacing-0: 0;
  --lexa-spacing-1: 0.25rem;
  --lexa-spacing-2: 0.5rem;
  --lexa-spacing-3: 0.75rem;
  --lexa-spacing-4: 1rem;
  --lexa-spacing-5: 1.25rem;
  --lexa-spacing-6: 1.5rem;
  --lexa-spacing-8: 2rem;
  --lexa-spacing-10: 2.5rem;
  --lexa-spacing-12: 3rem;

  /* --------------------------------------------------------------------------
     BORDERS & SHADOWS
     -------------------------------------------------------------------------- */
  --lexa-border-radius-sm: 0.25rem;
  --lexa-border-radius-base: 0.375rem;
  --lexa-border-radius-lg: 0.5rem;
  --lexa-border-radius-xl: 0.75rem;
  --lexa-border-radius-full: 9999px;

  --lexa-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --lexa-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
                      0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --lexa-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --lexa-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                    0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* --------------------------------------------------------------------------
     TRANSITIONS
     -------------------------------------------------------------------------- */
  --lexa-transition-fast: 150ms ease;
  --lexa-transition-base: 200ms ease;
  --lexa-transition-slow: 300ms ease;

  /* --------------------------------------------------------------------------
     Z-INDEX
     -------------------------------------------------------------------------- */
  --lexa-z-dropdown: 1000;
  --lexa-z-sticky: 1020;
  --lexa-z-fixed: 1030;
  --lexa-z-modal-backdrop: 1040;
  --lexa-z-modal: 1050;
  --lexa-z-popover: 1060;
  --lexa-z-tooltip: 1070;
}

/* ==========================================================================
   DARK MODE — Graphite / Near-Black
   Premium B2B SaaS aesthetic. NO navy/blue tint. NO brown/orange.
   Purple brand accent only where appropriate.
   ==========================================================================

   Surface hierarchy (darkest → lightest):
   ┌─────────────────────────────────────────┐
   │ --bg-app          #09090B  (deepest)    │
   │ --bg-page         #0C0C0E  (page bg)    │
   │ --bg-elevated     #131316  (header bar)  │
   │ --surface-card    #161618  (cards)       │
   │ --surface-panel   #1A1A1D  (panels)      │
   │ --surface-row-hov #1E1E21  (hover)       │
   │ --surface-overlay #222225  (menus)       │
   └─────────────────────────────────────────┘
   ========================================================================== */

[data-theme="dark"] {
  /* ── BACKGROUNDS ── */
  --bg-app: #09090B;
  --bg-page: #0C0C0E;
  --bg-elevated: #131316;

  /* ── SURFACES ── */
  --surface-sidebar: #0C0C0E;
  --surface-header: #131316;
  --surface-card: #161618;
  --surface-card-hover: #1C1C1F;
  --surface-table: #131316;
  --surface-row: transparent;
  --surface-row-hover: #1A1A1D;
  --surface-panel: #161618;

  /* ── BORDERS ── */
  --border-subtle: #1E1E22;
  --border-default: #27272B;
  --border-strong: #3A3A40;

  /* ── TEXT ── */
  --text-primary: #EDEDEF;
  --text-secondary: #A0A0A8;
  --text-muted: #6B6B74;
  --text-disabled: #3E3E45;

  /* ── BRAND ── */
  --brand-primary: #8B5CF6;
  --brand-hover: #7C3AED;
  --brand-soft: rgba(139,92,246,0.1);
  --brand-border: rgba(139,92,246,0.25);

  /* ── SEMANTIC: Success ── */
  --success: #22C55E;
  --success-bg: rgba(34,197,94,0.08);
  --success-border: rgba(34,197,94,0.2);
  --success-text: #4ADE80;

  /* ── SEMANTIC: Warning ── */
  --warning: #EAB308;
  --warning-bg: rgba(234,179,8,0.08);
  --warning-border: rgba(234,179,8,0.2);
  --warning-text: #FACC15;

  /* ── SEMANTIC: Danger ── */
  --danger: #EF4444;
  --danger-bg: rgba(239,68,68,0.08);
  --danger-border: rgba(239,68,68,0.2);
  --danger-text: #F87171;

  /* ── SEMANTIC: Info ── */
  --info: #3B82F6;
  --info-bg: rgba(59,130,246,0.08);
  --info-border: rgba(59,130,246,0.2);
  --info-text: #60A5FA;

  /* ── Legacy token mapping (consumed by existing component rules) ── */
  --lexa-bg-body: var(--bg-page);
  --lexa-bg-subtle: var(--surface-card);
  --lexa-bg-muted: var(--surface-panel);
  --lexa-white: var(--surface-card);
  --lexa-secondary-light: var(--surface-card);

  --lexa-surface-base: var(--bg-page);
  --lexa-surface-raised: var(--surface-card);
  --lexa-surface-overlay: #222225;
  --lexa-surface-sunken: #101012;
  --lexa-surface-hover: var(--surface-row-hover);
  --lexa-surface-active: rgba(139,92,246,0.15);

  --lexa-text-primary: var(--text-primary);
  --lexa-text-secondary: var(--text-secondary);
  --lexa-text-tertiary: var(--text-muted);
  --lexa-text-disabled: var(--text-disabled);
  --lexa-text-inverse: #09090B;
  --lexa-text-link: #A78BFA;

  --lexa-border-default: var(--border-default);
  --lexa-border-strong: var(--border-strong);
  --lexa-border-subtle: var(--border-subtle);
  --lexa-border-color: var(--border-default);
  --lexa-border-color-subtle: var(--border-subtle);

  --lexa-primary-light: rgba(139,92,246,0.12);
  --lexa-primary-50: rgba(139,92,246,0.06);
  --lexa-primary-100: rgba(139,92,246,0.12);

  --lexa-outline-primary: #A78BFA;
  --lexa-outline-success: #4ADE80;
  --lexa-outline-danger: #F87171;
  --lexa-outline-warning: #FBBF24;
  --lexa-outline-info: #60A5FA;
  --lexa-outline-secondary: var(--text-muted);

  --lexa-state-warning-bg: var(--warning-bg);
  --lexa-state-warning-text: var(--warning-text);
  --lexa-state-danger-bg: var(--danger-bg);
  --lexa-state-danger-text: var(--danger-text);
  --lexa-state-success-bg: var(--success-bg);
  --lexa-state-success-text: var(--success-text);
  --lexa-state-info-bg: var(--info-bg);
  --lexa-state-info-text: var(--info-text);
  --lexa-state-neutral-bg: rgba(160,160,168,0.06);
  --lexa-state-neutral-text: var(--text-secondary);

  --lexa-success-light: var(--success-bg);
  --lexa-warning-light: var(--warning-bg);
  --lexa-danger-light: var(--danger-bg);
  --lexa-info-light: var(--info-bg);

  /* ── Neutrals (monotone graphite scale, zero blue) ── */
  --lexa-gray-900: #EDEDEF;
  --lexa-gray-800: #D4D4D8;
  --lexa-gray-700: #A0A0A8;
  --lexa-gray-600: #6B6B74;
  --lexa-gray-500: #4E4E56;
  --lexa-gray-400: #3A3A40;
  --lexa-gray-300: #27272B;
  --lexa-gray-200: #1E1E22;
  --lexa-gray-100: #131316;
  --lexa-gray-50: #09090B;
  --lexa-black: #FAFAFA;

  /* ── Shadows ── */
  --lexa-shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --lexa-shadow-md: 0 4px 12px rgba(0,0,0,0.6);
  --lexa-shadow-lg: 0 8px 24px rgba(0,0,0,0.7);
}