/* ──────────────────────────────────────────────
   operio-tokens.css — única fuente de verdad de diseño.
   Ningún valor hex, tamaño de fuente, radio o espaciado se
   escribe a mano fuera de este archivo. Ver CLAUDE.md.
   ────────────────────────────────────────────── */

:root {
    /* Colores — superficie */
    --op-bg:            #FFFFFF;
    --op-surface:       #F6F7F9;
    --op-surface-sunk:  #EEF0F4;
    --op-border:        #E6E8EC;
    --op-border-strong: #CFD4DC;

    /* Colores — texto */
    --op-text:          #0F1216;
    --op-text-muted:    #5B6472;
    --op-text-subtle:   #8A93A1;
    --op-text-invert:   #FFFFFF;

    /* Colores — acento */
    --op-accent:        #6D28FF;
    --op-accent-press:  #5A1FD6;
    --op-accent-soft:   #F0EAFF;
    --op-accent-ring:   #C9B4FF;

    /* Colores — estados de cita */
    --op-ok:      #0E7C5A;
    --op-ok-soft: #E4F4EE;
    --op-wait:      #B45309;
    --op-wait-soft: #FDF1DF;
    --op-bad:      #C81E3A;
    --op-bad-soft: #FCE8EC;
    --op-off:      #6B7280;
    --op-off-soft: #F1F2F4;

    /* Colores — panel admin (Areas/Admin, fondo oscuro exclusivo del panel) */
    --op-admin-bg: #1A1A1F;

    /* Tipografía */
    --op-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

    --op-fs-32: 32px;
    --op-fs-24: 24px;
    --op-fs-20: 20px;
    --op-fs-16: 16px;
    --op-fs-14: 14px;
    --op-fs-12: 12px;

    /* Espaciado — base 4 */
    --op-1: 4px;
    --op-2: 8px;
    --op-3: 12px;
    --op-4: 16px;
    --op-6: 24px;
    --op-8: 32px;
    --op-12: 48px;

    /* Radios */
    --op-radius-control: 8px;
    --op-radius-card: 12px;
    --op-radius-pill: 999px;
    --op-radius-sheet: 20px 20px 0 0;

    /* Elevación — solo dos niveles */
    --op-shadow-card:  0 1px 2px rgba(15, 18, 22, .06);
    --op-shadow-sheet: 0 -8px 32px rgba(15, 18, 22, .16);

    /* Movimiento */
    --op-motion-duration: 160ms;
    --op-motion-ease: cubic-bezier(.2, .8, .2, 1);
}