/* ============================================================================
   ui-tokens.css — token condivisi dell'ecosistema WorldcApp (layer UI comune).

   FONTE UNICA: luca-planner/public/assets/ui-tokens.css.
   Le copie negli altri repo (beyondspoke.ai, worldcapp.com, ...) sono GENERATE:
   NON editarle a mano — modifica qui e ripropaga con planner-ops/ui-sync.sh push
   (drift check: ui-sync.sh check). Storia: planner CDX, worldcapp WC-045.

   Contenuto: solo il core generico (superfici, testo, semantici, field stack,
   spacing, type scale, radius, selected/focus, dark). I token di prodotto
   (--provider-*, --social-*, --strategy-*, --dashboard-card-*, logo gradient)
   restano nell'app-ui.css/wa-ui.css di ciascun repo, DOPO questo file.
   ========================================================================== */

:root {
    /* Theme tokens: semantic colors, surfaces and shadows shared across the UI. */
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-pill: 50rem;
    --app-radius: var(--bs-border-radius);
    --app-radius-sm: var(--bs-border-radius-sm);
    --app-radius-lg: var(--bs-border-radius-lg);
    --app-radius-pill: var(--bs-border-radius-pill);
    --bs-btn-border-radius: var(--app-radius);
    --bs-btn-border-radius-sm: var(--app-radius-sm);
    --bs-btn-border-radius-lg: var(--app-radius-lg);
    --bs-card-border-radius: var(--app-radius);
    --bs-modal-border-radius: var(--app-radius-lg);
    --bs-dropdown-border-radius: var(--app-radius);
    --bs-input-border-radius: var(--app-radius);
    --bs-input-border-radius-sm: var(--app-radius-sm);
    --bs-input-border-radius-lg: var(--app-radius-lg);
    --app-text: #334155;
    --app-heading: #0f172a;
    --app-muted: #64748b;
    --app-border: #e2e8f0;
    --app-border-strong: #374151;
    --app-border-hover: #cbd5e1;
    --app-text-soft: #475569;
    --app-link-text: #1d4ed8;
    --app-btn-close-filter: none;
    --app-body-bg: #eef2f7;
    --app-surface: #ffffff;
    --app-surface-muted: #f5f6f7;
    --app-surface-raised: #ffffff;
    --app-surface-deep: #f8fafc;
    --app-table-stripe: #f1f3f6;
    --app-table-hover: #e7ebef;
    --app-primary: #2563eb;
    --app-primary-hover: #1e3a8a;
    /* Accent = color of strips, tinted borders and callouts.
       Same value as primary today, kept as a separate token so the
       two can diverge later (e.g. per-brand strip color) without a
       product-wide refactor. */
    --app-accent: #2563eb;
    --app-accent-strong: #1e3a8a;
    --app-brand-blue: #1e3a8a;
    --app-ui-blue: #2563eb;
    --app-ui-sky: #38bdf8;
    --app-gradient-primary: linear-gradient(90deg, #1e3a8a 0%, #2563eb 52%, #38bdf8 100%);
    --app-gradient-surface: var(--app-surface);
    --app-gradient-surface-raised: var(--app-surface);
    --app-gradient-surface-muted: var(--app-surface-muted);
    --app-field-padding-y: 7px;
    --app-field-padding-x: 9px;
    --app-field-border: var(--app-border);
    --app-field-background: #f1f5f9;
    --app-field-text: var(--app-text);
    --app-field-placeholder: #7b8aa0;
    --app-field-shadow: none;
    --app-field-hover-border: #cfd8e2;
    --app-field-hover-background: #ffffff;
    --app-field-hover-shadow: none;
    --app-field-focus-border: #2563eb;
    --app-field-focus-background: #ffffff;
    --app-field-focus-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.12),
        0 0 0 4px rgba(15, 23, 42, 0.06);
    --app-strip-height-xs: 4px;
    --app-strip-height-sm: 5px;
    --app-strip-height-lg: 10px;
    --app-strip-opacity-strong: 1;
    --app-accent-strip-height: var(--app-strip-height-sm);
    --app-accent-strip-opacity: var(--app-strip-opacity-strong);
    --app-accent-strip-offset: 0;
    --app-shadow-soft: 0 8px 18px rgba(15, 23, 42, 0.05);
    --app-focus-ring: rgba(59, 130, 246, 0.16);
    /* Selected-state tokens: shared vocabulary for the "this is the active
       card / the active row / the selected day" highlight. Two intensities:
       - STRONG (wash + ring + strip): for selected cards (provider, help nav).
       - SOFT (wash-soft + strip on first cell): for rows and calendar days.
       Dark mirrors the same shape so the highlight reads consistently in
       both themes. */
    --app-selected-strip: #2563eb;
    --app-selected-border: #93c5fd;
    --tint-strip-width: var(--app-strip-height-sm);
    --app-selected-wash: color-mix(in srgb, #2563eb 13%, #ffffff);
    --app-selected-wash-soft: color-mix(in srgb, #2563eb 9%, #ffffff);
    --app-header-actions-gap: 12px;
    --app-icon-action-size: 34px;
    --app-success-text: #15803d;
    --app-success-bg: #ecfdf3;
    --app-success-border: #bbf7d0;
    --app-success-fill: #15803d;
    --app-success-fill-hover: #14532d;
    --app-success-fill-text: #ffffff;
    --app-warning-text: #b45309;
    --app-warning-bg: #fff7ed;
    --app-warning-border: #fed7aa;
    --app-warning-fill: #f59e0b;
    /* CDX-559: amber-600 → amber-700 per step hover -15 L, coerente con success (-9),
       error (-13), ai (-15). Era -6, percettivamente meno responsivo. Simmetrico al fix
       analogo dark di CDX-557. */
    --app-warning-fill-hover: #b45309;
    --app-warning-fill-text: #451a03;
    --app-error-text: #dc2626;
    --app-error-bg: #fef3f2;
    --app-error-border: #fecaca;
    --app-error-fill: #dc2626;
    --app-error-fill-hover: #991b1b;
    --app-error-fill-text: #ffffff;
    --app-info-text: #1d4ed8;
    --app-info-bg: #eff6ff;
    --app-info-border: #bfdbfe;
    /* CDX-731: fill famiglia info (es. progress bar non-AI, regola CDX-715).
       Oggi coincide con --app-primary-fill; token separato per poter divergere. */
    --app-info-fill: #2563eb;
    /* CDX-560: primary diventa famiglia token-based (era hex hardcoded #2563eb/#1e3a8a in
       .btn-primary-ui). Light: Blue-600 → Blue-800 step -9 L, coerente con success (-9). */
    --app-primary-fill: #2563eb;
    --app-primary-fill-hover: #1e40af;
    --app-primary-fill-text: #ffffff;
    --app-ai-text: #6d28d9;
    --app-ai-bg: #f5f3ff;
    --app-ai-border: #ddd6fe;
    --app-ai-fill: #6d28d9;
    --app-ai-fill-hover: #4c1d95;
    --app-ai-fill-text: #ffffff;
    /* Bootstrap tooltip override — look "card flottante" coerente cross-tema.
       Light: bg scuro (heading slate) + text bianco; Dark: bg slate medio
       (surface-raised, più chiaro del bg pagina) + text quasi-bianco. */
    --bs-tooltip-bg: var(--app-heading);
    --bs-tooltip-color: var(--app-surface-raised);
    /* Spacing scale — value = name, 2 px grid up to 24 px then 32 / 48.
       Prefer these tokens over raw pixel values in new components;
       existing rules migrate opportunistically when touched. */
    --app-space-2: 2px;
    --app-space-4: 4px;
    --app-space-6: 6px;
    --app-space-8: 8px;
    --app-space-10: 10px;
    --app-space-12: 12px;
    --app-space-14: 14px;
    --app-space-16: 16px;
    --app-space-18: 18px;
    --app-space-20: 20px;
    --app-space-22: 22px;
    --app-space-24: 24px;
    --app-space-32: 32px;
    --app-space-48: 48px;
    --app-text-2xs: 0.66rem;
    --app-text-xs: 0.72rem;
    --app-text-sm: 0.84rem;
    --app-text-md: 0.96rem;
    --app-text-lg: 1.08rem;
    --app-text-xl: 1.35rem;
    --app-text-2xl: 1.72rem;
    --app-text-3xl: 2.25rem;

}

html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --app-text: #d2dae6;
    --app-heading: #f8fafc;
    --app-muted: #94a3b8;
    --app-border: #334155;
    --app-border-strong: #cbd5e1;
    --app-border-hover: #475569;
    --app-text-soft: #cbd5e1;
    --app-link-text: #dbeafe;
    --app-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
    --app-body-bg: #0f172a;
    --app-surface: #111827;
    --app-surface-muted: #182131;
    --app-surface-raised: #1e293b;
    --app-surface-deep: #0f172a;
    --app-table-stripe: #172234;
    --app-table-hover: #1f2c40;
    --app-primary: #60a5fa;
    --app-primary-hover: #93c5fd;
    --app-accent: #60a5fa;
    --app-accent-strong: #93c5fd;
    --app-brand-blue: #93c5fd;
    --app-ui-blue: #60a5fa;
    --app-ui-sky: #38bdf8;
    --app-gradient-primary: linear-gradient(90deg, #60a5fa 0%, #38bdf8 52%, #22d3ee 100%);
    --app-gradient-surface: var(--app-surface);
    --app-gradient-surface-raised: var(--app-surface);
    --app-gradient-surface-muted: var(--app-surface-muted);
    --app-field-border: #334155;
    --app-field-background: #0a0f1c;
    --app-field-text: #f8fafc;
    --app-field-placeholder: #64748b;
    --app-field-shadow: none;
    --app-field-hover-border: #475569;
    --app-field-hover-background: #132032;
    --app-field-hover-shadow: none;
    --app-field-focus-border: #60a5fa;
    --app-field-focus-background: #0a0f1c;
    --app-field-focus-shadow: 0 0 0 1px rgba(96, 165, 250, 0.28), 0 0 0 4px rgba(30, 64, 175, 0.16);
    --app-shadow-soft: 0 10px 22px rgba(2, 6, 23, 0.22);
    --app-focus-ring: rgba(96, 165, 250, 0.28);
    --app-selected-strip: #60a5fa;
    --app-selected-border: #3b82f6;
    --app-selected-wash: color-mix(in srgb, #60a5fa 18%, #111827);
    --app-selected-wash-soft: color-mix(in srgb, #60a5fa 12%, #111827);
    --app-success-text: #86efac;
    --app-success-bg: #153226;
    /* CDX-556: allineamento border dark mode in fascia L 37-48% per coerenza visiva.
       Tutti i border accent (success/warning/error/ai/info) ora percepiti come stessa
       famiglia, range ridotto da 23 a 11 punti di lightness. */
    --app-success-border: #3f8a62;
    --app-success-fill: #16a34a;
    --app-success-fill-hover: #22c55e;
    --app-success-fill-text: #ffffff;
    --app-warning-text: #fbbf24;
    /* CDX-557: bg alzato da L 10 a L 13 per allinearsi al resto dei bg accent dark (fascia 12-14). */
    --app-warning-bg: #2f1f0a;
    --app-warning-border: #b45309;
    --app-warning-fill: #f59e0b;
    /* CDX-557: amber-400 → amber-300 per dare step hover percettibile (+14 L) coerente con
       success/error/ai che già seguono +9/+13 L. Precedente +4 L risultava "fiacco". */
    --app-warning-fill-hover: #fcd34d;
    --app-warning-fill-text: #451a03;
    --app-error-text: #fecaca;
    --app-error-bg: #2b1016;
    --app-error-border: #b91c1c;
    --app-error-fill: #dc2626;
    --app-error-fill-hover: #ef4444;
    --app-error-fill-text: #ffffff;
    --app-info-text: #93c5fd;
    --app-info-bg: #0c2138;
    --app-info-border: #1d4ed8;
    --app-info-fill: #2563eb;
    /* CDX-560: primary dark — Blue-600 → Blue-500 step +7 L (leggermente sotto fascia +9/+13
       degli altri primary fill dark, ma coerente con percezione blu più "luminoso"). */
    --app-primary-fill: #2563eb;
    --app-primary-fill-hover: #3b82f6;
    --app-primary-fill-text: #ffffff;
    --app-ai-text: #a78bfa;
    /* CDX-557: bg scurito da L 20 a L 14 per allinearsi alla fascia bg accent dark (12-14).
       Era outlier sopra. Hue Indigo/Violet preservato. */
    --app-ai-bg: #16133b;
    /* CDX-555: schiarito un passo (Violet-900 → Violet-800) per dare leggibilità al bordo
       in dark mode, dove #4c1d95 su bg #1e1b4b aveva contrasto insufficiente. */
    --app-ai-border: #5b21b6;
    --app-ai-fill: #7c3aed;
    --app-ai-fill-hover: #8b5cf6;
    --app-ai-fill-text: #ffffff;
    /* Bootstrap tooltip override per dark theme. */
    --bs-tooltip-bg: var(--app-surface-raised);
    --bs-tooltip-color: var(--app-heading);

}