/* ══════════════════════════════════════════════════════════════════
   Appointily · Design tokens
   ──────────────────────────────────────────────────────────────────
   Única fuente de verdad de color, tipografía, radios, sombras,
   espaciado y movimiento. Solo define variables: es seguro cargarlo
   en cualquier página (app, reservas públicas, auth, pagos).

   Capas:
     1. --brand-*   Paleta oficial (no modificar) y derivados.
     2. --neutral-* Escala neutra derivada de Onyx con matiz Cobalt.
     3. --color-*   Roles semánticos. Los componentes usan SOLO estos.

   Contraste verificado (WCAG 2.x):
     White   / Persian Blue   8.56  AA      Onyx / Slime Lime  15.73 AA
     White   / True Cobalt   13.15  AA      Lime / True Cobalt 10.47 AA
     Persian / White          8.56  AA      Lime / White        1.26 ✗
   → Slime Lime nunca se usa como texto, icono o trazo fino sobre
     superficies claras: solo como relleno con texto Onyx, o sobre
     True Cobalt / fondos oscuros.
   ══════════════════════════════════════════════════════════════════ */

:root {
    /* ── 1. Paleta oficial ─────────────────────────────────────── */
    --brand-persian-blue: #013AC9;
    --brand-white:        #FEFFFF;
    --brand-onyx:         #0A0A0A;
    --brand-true-cobalt:  #012583;
    --brand-slime-lime:   #ACFC0F;

    /* Derivados de marca (estados y tintes) */
    --brand-persian-blue-hover: #0230A8; /* Persian → Cobalt, 10.5:1 con blanco */
    --brand-blue-50:  #EEF3FD;
    --brand-blue-100: #DDE6FB;
    --brand-blue-200: #B8CAF6;
    --brand-slime-lime-hover: #9BE30D;   /* 12.6:1 con Onyx */
    --brand-lime-50:  #F3FED9;
    --brand-lime-ink: #3B6500;           /* texto «lima» legible sobre blanco, 6.9:1 */

    /* ── 2. Neutros ────────────────────────────────────────────── */
    --neutral-0:   #FEFFFF;
    --neutral-25:  #F8FAFD;
    --neutral-50:  #F5F7FB;
    --neutral-100: #ECEFF5;
    --neutral-150: #E3E7EF;
    --neutral-200: #D4DAE5;
    --neutral-400: #8A94A6;  /* 3.05:1 · bordes de campos, placeholders */
    --neutral-500: #5D6678;  /* 5.76:1 · texto atenuado */
    --neutral-600: #434B5B;  /* 8.75:1 · texto secundario */
    --neutral-800: #1F232B;
    --neutral-900: #0A0A0A;  /* Onyx */

    /* ── 3. Roles semánticos · tema claro ──────────────────────── */
    /* Marca */
    --color-primary:          var(--brand-persian-blue);
    --color-primary-hover:    var(--brand-persian-blue-hover);
    --color-primary-active:   var(--brand-true-cobalt);
    --color-primary-text:     var(--brand-persian-blue);   /* enlaces, iconos activos */
    --color-primary-subtle:   var(--brand-blue-50);
    --color-primary-muted:    var(--brand-blue-100);
    --color-primary-border:   var(--brand-blue-200);
    --color-on-primary:       var(--brand-white);

    --color-secondary:        var(--brand-true-cobalt);    /* profundidad, encabezados especiales */
    --color-secondary-hover:  #011C66;
    --color-secondary-text:   var(--brand-true-cobalt);
    --color-secondary-subtle: var(--brand-blue-50);
    --color-on-secondary:     var(--brand-white);

    --color-accent:           var(--brand-slime-lime);     /* acento: usar con moderación */
    --color-accent-hover:     var(--brand-slime-lime-hover);
    --color-accent-subtle:    var(--brand-lime-50);
    --color-accent-text:      var(--brand-lime-ink);
    --color-on-accent:        var(--brand-onyx);

    --color-inverse:          var(--brand-onyx);           /* botón oscuro / tooltips */
    --color-inverse-hover:    var(--neutral-800);
    --color-on-inverse:       var(--brand-white);

    /* Superficies */
    --color-background:       var(--neutral-50);
    --color-surface:          var(--brand-white);
    --color-surface-raised:   var(--brand-white);
    --color-surface-sunken:   var(--neutral-25);
    --color-surface-hover:    var(--neutral-50);
    --color-surface-selected: var(--brand-blue-50);
    --color-overlay:          rgba(10, 10, 10, .48);

    /* Texto */
    --color-text-primary:     var(--brand-onyx);
    --color-text-secondary:   var(--neutral-600);
    --color-text-muted:       var(--neutral-500);
    --color-text-disabled:    var(--neutral-400);
    --color-text-inverse:     var(--brand-white);

    /* Bordes */
    --color-border:           var(--neutral-150);   /* separadores, tarjetas */
    --color-border-strong:    var(--neutral-200);
    --color-border-input:     var(--neutral-400);   /* 3:1 · campos de formulario */

    /* Estados */
    --color-success:          #157F3C;
    --color-success-solid:    #157F3C;
    --color-success-subtle:   #EAF7EE;
    --color-success-border:   #B7E2C4;
    --color-warning:          #A15C00;
    --color-warning-solid:    #A15C00;
    --color-warning-subtle:   #FFF6E5;
    --color-warning-border:   #F5D69C;
    --color-error:            #C42121;
    --color-error-solid:      #C42121;
    --color-error-hover:      #A11A1A;
    --color-error-subtle:     #FDEEEE;
    --color-error-border:     #F4C2C2;
    --color-info:             var(--color-primary-text);
    --color-info-subtle:      var(--color-primary-subtle);
    --color-info-border:      var(--color-primary-border);

    /* Foco */
    --color-focus:            var(--brand-persian-blue);
    --focus-ring:             0 0 0 3px rgba(1, 58, 201, .25);

    /* Visualización de datos (estados de cita · validado para CVD con
       codificación secundaria: etiqueta + forma) */
    --chart-1: var(--brand-persian-blue);
    --chart-2: var(--brand-true-cobalt);
    --chart-grid: var(--neutral-150);
    --chart-axis: var(--neutral-500);

    /* ── Tipografía ────────────────────────────────────────────── */
    --font-sans: 'LufgaRegular', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --text-xs:   .75rem;
    --text-sm:   .8125rem;
    --text-base: .875rem;
    --text-md:   1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.375rem;
    --text-2xl:  1.75rem;
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semibold: 600;
    --weight-bold:    700;
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --tracking-tight: -.015em;
    --tracking-caps:  .04em;

    /* ── Forma, profundidad y espacio ──────────────────────────── */
    --radius-sm:   8px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(10, 10, 10, .04);
    --shadow-sm: 0 1px 2px rgba(10, 10, 10, .04), 0 2px 8px rgba(1, 37, 131, .04);
    --shadow-md: 0 6px 20px rgba(1, 37, 131, .08);
    --shadow-lg: 0 24px 60px rgba(10, 10, 10, .18);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    --control-height-sm: 32px;
    --control-height:    38px;
    --control-height-lg: 44px;

    /* ── Botón (componente único: .btn en appointily-ui.css) ──── */
    --button-radius: 20px;

    --button-height-sm: 36px;
    --button-height-md: 44px;   /* predeterminado */
    --button-height-lg: 48px;
    --button-icon-only-size: 40px;
    --button-icon-only-size-touch: 44px;

    --button-padding-x-sm: 14px;
    --button-padding-x-md: 20px;
    --button-padding-x-lg: 24px;

    --button-font-size-sm: 13px;
    --button-font-size-md: 14px;
    --button-font-size-lg: 15px;
    --button-font-weight: 600;

    --button-icon-size-sm: 14px;
    --button-icon-size-md: 16px;
    --button-icon-size-lg: 18px;
    --button-icon-only-glyph: 18px;

    --button-gap: 8px;

    /* ── Campos de formulario (alineados con los botones) ─────── */
    --field-height-sm: var(--button-height-sm);
    --field-height-md: var(--button-height-md);
    --field-height-lg: var(--button-height-lg);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E%3Cpath d=%27M4 6l4 4 4-4%27 stroke=%27%235D6678%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
    --select-chevron-active: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E%3Cpath d=%27M4 6l4 4 4-4%27 stroke=%27%23013AC9%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
    --button-transition: 180ms ease;

    /* ── Movimiento ────────────────────────────────────────────── */
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --motion-slow: 320ms;
    --ease-out: cubic-bezier(.2, .7, .2, 1);
}

/* ── Tema oscuro ─────────────────────────────────────────────────
   Tema propio, no una inversión: superficies derivadas de Onyx con
   matiz Cobalt; los azules se aclaran para conservar contraste y el
   foco pasa a Slime Lime (14:1 sobre la superficie).            */
[data-bs-theme="dark"] {
    --color-primary:          #2F5BF0;   /* blanco 5.41:1 */
    --color-primary-hover:    #2450D8;   /* blanco 6.52:1 */
    --color-primary-active:   #1E44BC;
    --color-primary-text:     #7C9BFF;   /* 6.78:1 sobre superficie */
    --color-primary-subtle:   rgba(47, 91, 240, .16);
    --color-primary-muted:    rgba(47, 91, 240, .26);
    --color-primary-border:   rgba(124, 155, 255, .38);

    --color-secondary:        #1A3A9C;
    --color-secondary-hover:  #22469F;
    --color-secondary-text:   #A9BCFF;   /* 9.61:1 */
    --color-secondary-subtle: rgba(169, 188, 255, .12);

    --color-accent-subtle:    rgba(172, 252, 15, .12);
    --color-accent-text:      var(--brand-slime-lime);

    --color-inverse:          var(--brand-white);
    --color-inverse-hover:    #E3E7EF;
    --color-on-inverse:       var(--brand-onyx);

    --color-background:       #080B14;
    --color-surface:          #10172A;
    --color-surface-raised:   #162037;
    --color-surface-sunken:   #0C1220;
    --color-surface-hover:    rgba(255, 255, 255, .04);
    --color-surface-selected: rgba(47, 91, 240, .16);
    --color-overlay:          rgba(0, 0, 0, .6);

    --color-text-primary:     #F2F5FB;   /* 16.3:1 */
    --color-text-secondary:   #B6C0D4;   /*  9.7:1 */
    --color-text-muted:       #8C98B0;   /*  6.1:1 */
    --color-text-disabled:    #5B6680;
    --color-text-inverse:     var(--brand-onyx);

    --color-border:           #23304A;
    --color-border-strong:    #33415E;
    --color-border-input:     #5B6B8C;   /* 3.3:1 */

    --color-success:          #4ADE80;
    --color-success-subtle:   rgba(74, 222, 128, .12);
    --color-success-border:   rgba(74, 222, 128, .32);
    --color-warning:          #FBBF24;
    --color-warning-subtle:   rgba(251, 191, 36, .12);
    --color-warning-border:   rgba(251, 191, 36, .32);
    --color-error:            #F87171;
    --color-error-subtle:     rgba(248, 113, 113, .12);
    --color-error-border:     rgba(248, 113, 113, .34);

    --color-focus:            var(--brand-slime-lime);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E%3Cpath d=%27M4 6l4 4 4-4%27 stroke=%27%238C98B0%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
    --select-chevron-active: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E%3Cpath d=%27M4 6l4 4 4-4%27 stroke=%27%237C9BFF%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
    --focus-ring:             0 0 0 3px rgba(172, 252, 15, .35);

    --chart-1: #2F5BF0;
    --chart-2: #7C9BFF;
    --chart-grid: #23304A;
    --chart-axis: #8C98B0;

    --shadow-xs: none;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
}