/* =========================================================================
   Tokens de disseny d'OmniaOne (vegeu AUDITORIA-UX-UI.md, secció 2b)
   -------------------------------------------------------------------------
   Únic lloc on es defineixen colors, radis, espaiats i moviment. Els colors
   es deriven de les variables --mud-palette-* que genera OmniaOneTheme.cs,
   així que segueixen soles el mode fosc (tant el del sistema com el
   commutador manual) sense duplicar cap valor clar/fosc aquí.
   Regla: cap component nou porta hex ni estils inline; fa servir aquests
   tokens o les classes que els consumeixen.
   ========================================================================= */

:root {
    /* Color */
    --oo-primary: var(--mud-palette-primary);
    --oo-danger: var(--mud-palette-error);
    --oo-warning: var(--mud-palette-warning);
    --oo-success: var(--mud-palette-success);

    --oo-bg: var(--mud-palette-background);
    --oo-surface: var(--mud-palette-surface);
    /* Tint suau del primari per a seleccions i fila activa (6 %), vàlid en clar i fosc. */
    --oo-surface-tint: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));

    /* Lectura amb IA (IconaIA, «Escanejar amb IA» del "+"): degradat del primari al violeta (terciari del tema),
       amb un tint molt suau per al fons de l'opció. Segueix sol el mode fosc. */
    --oo-ia-1: var(--mud-palette-primary);
    --oo-ia-2: var(--mud-palette-tertiary);
    --oo-ia-fons: linear-gradient(135deg, var(--oo-ia-1), var(--oo-ia-2));
    --oo-ia-tint: linear-gradient(135deg, color-mix(in srgb, var(--oo-ia-1) 7%, var(--oo-surface)), color-mix(in srgb, var(--oo-ia-2) 9%, var(--oo-surface)));
    --oo-ia-text: var(--mud-palette-white);

    --oo-text: var(--mud-palette-text-primary);
    --oo-text-2: var(--mud-palette-text-secondary);
    --oo-text-3: color-mix(in srgb, var(--mud-palette-text-secondary) 85%, var(--mud-palette-background) 15%);

    --oo-border: 1px solid var(--mud-palette-lines-default);

    /* Radis */
    --oo-radius-sm: 8px;
    --oo-radius-md: 12px;
    --oo-radius-lg: 16px;
    --oo-radius-pill: 999px;

    /* Espaiat: escala de 4 px */
    --oo-space-1: 4px;
    --oo-space-2: 8px;
    --oo-space-3: 12px;
    --oo-space-4: 16px;
    --oo-space-5: 24px;
    --oo-space-6: 32px;
    --oo-space-7: 48px;
    --oo-space-8: 64px;

    /* Elevació: vora en repòs, ombra suau només en hover de targetes clicables */
    --oo-shadow-hover: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.08);
    /* Elements flotants sobre el contingut (barra inferior, botons rodons de capçalera). */
    --oo-shadow-flotant: 0 2px 6px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.12);

    /* Barra inferior flotant (BottomNav, mòbil): alçada de la càpsula i separació de la vora
       inferior per sobre de la safe area. El padding del contingut i el panell del "+" en depenen. */
    --oo-barra-inferior-alcada: 64px;
    --oo-barra-inferior-marge: 12px;
    --oo-barra-inferior-ocupa: calc(var(--oo-barra-inferior-alcada) + var(--oo-barra-inferior-marge) + env(safe-area-inset-bottom));

    /* Moviment */
    --oo-ease: cubic-bezier(0.2, 0, 0, 1);
    --oo-dur-fast: 120ms;
    --oo-dur: 200ms;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --oo-dur-fast: 0ms;
        --oo-dur: 0ms;
    }
}

/* Color del pla (Admin › Plans) -------------------------------------------------
   EstilPla posa --oo-pla-1 (i --oo-pla-2 per al degradat) a l'element amb .oo-pla;
   aquí se'n deriva la resta. Text fosc sobre el daurat (contrast en clar i fosc) i,
   en mode fosc, el daurat una mica més clar perquè no s'apagui sobre el fons. Els
   colors del tema i de les categories no es toquen. */
.oo-pla {
    --oo-pla-c1: var(--oo-pla-1);
    --oo-pla-c2: var(--oo-pla-2, var(--oo-pla-1));
    --oo-pla-fons: linear-gradient(135deg, var(--oo-pla-c1), var(--oo-pla-c2));
    --oo-pla-text: color-mix(in srgb, var(--oo-pla-c2) 22%, var(--mud-palette-black));
    --oo-pla-tint: color-mix(in srgb, var(--oo-pla-c1) 12%, var(--oo-surface));
    --oo-pla-lluentor: color-mix(in srgb, var(--mud-palette-white) 70%, transparent);
}

:root[data-tema="dark"] .oo-pla {
    --oo-pla-c1: color-mix(in srgb, var(--oo-pla-1) 85%, var(--mud-palette-white));
    --oo-pla-c2: color-mix(in srgb, var(--oo-pla-2, var(--oo-pla-1)) 85%, var(--mud-palette-white));
    --oo-pla-tint: color-mix(in srgb, var(--oo-pla-c1) 16%, var(--oo-surface));
}