/* ============================================================
   Pms-Hotels — Design tokens (UNICO punto di controllo grafica)
   ------------------------------------------------------------
   Modificare QUI font, colori, spaziature, raggi.
   Su mobile i token sotto @media aumentano leggibilità/touch.
   Caricato PRIMA di style.css.
   ============================================================ */

:root {
  /* ---- Colori primari ---- */
  --color-primary:        #2563eb;
  --color-primary-light:  #eff6ff;
  --color-primary-dark:   #1d4ed8;

  --color-menu-client:      #0d9488;
  --color-menu-client-dark: #0f766e;

  --color-booking-import:      #6366f1;
  --color-booking-import-dark: #4f46e5;

  /* ---- Logomarca programma (menu) ---- */
  --brand-mark-bg:     #86efac;
  --brand-mark-color:  #dc2626;

  /* ---- Superfici ---- */
  --color-bg:             #f3f4f6;
  --color-bg-white:       #ffffff;
  --color-surface:        #f9fafb;
  --color-border:         #e5e7eb;
  --color-border-dark:    #d1d5db;

  /* ---- Testo ---- */
  --color-text:           #111827;
  --color-text-muted:     #6b7280;
  --color-text-label:     #2563eb;

  /* ---- Feedback ---- */
  --color-success:        #16a34a;
  --color-success-light:  #4cd964;
  --color-warning:        #d97706;
  --color-warning-light:  #fbbf24;
  --color-danger:         #dc2626;
  --color-danger-light:   #ef4444;

  /* ---- Status prenotazioni ---- */
  --status-confirmed:     #4cd964;
  --status-confirmed-txt: #ffffff;
  --status-pending:       #ffe066;
  --status-pending-txt:   #333333;
  --status-in:            #7dd3fc;
  --status-in-txt:        #0f172a;
  --status-out:           #0ea5e9;
  --status-out-txt:       #ffffff;
  --status-cancel:        #ff6b6b;
  --status-cancel-txt:    #ffffff;
  --status-noshow:        #c084fc;
  --status-noshow-txt:    #ffffff;
  --status-blocked:       #4b5563;
  --status-blocked-txt:   #ffffff;
  --status-bonus:         #f59e0b;
  --status-bonus-txt:     #ffffff;

  /* ---- Tipografia (cambia qui → tutta l’app) ---- */
  /* Scala +~15% rispetto alla base precedente (più comoda PC + telefono) */
  --font-base:       'Inter', 'DM Sans', system-ui, sans-serif;
  --font-mono:       'DM Mono', monospace;
  --font-size-xs:    11px;
  --font-size-sm:    13px;
  --font-size-base:  14px;
  --font-size-md:    15px;
  --font-size-rg:    16px;
  --font-size-lg:    17px;
  --font-size-lead:  18px;
  --font-size-ui:    19px;
  --font-size-xl:    20px;
  --font-size-xl-alt: 21px;
  --font-size-2xl:   22px;
  --font-size-3xl:   24px;
  --font-size-4xl:   26px;
  --font-size-5xl:   34px;
  --font-size-6xl:   30px;
  --font-size-7xl:   32px;
  --font-size-8xl:   36px;
  --font-size-9xl:   50px;
  --font-size-10xl:  58px;
  --font-size-hero-max: 68px;
  --font-size-hero-xl:  76px;

  /* ---- Spaziature ---- */
  --space-xs:  5px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  18px;
  --space-xl:  26px;

  /* ---- Bordi / ombre ---- */
  --radius-sm:   3px;
  --radius-base: 5px;
  --radius-lg:   8px;
  --radius-pill: 20px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.14);

  --transition-fast: 0.12s ease;
  --transition-base: 0.20s ease;

  /* ---- Layout ---- */
  --nav-height:        48px;
  --toolbar-height:    48px;
  --form-label-width:  150px;
  --input-width:       240px;
  --touch-min:         44px;
  --page-pad-x:        18px;
  --page-pad-y:        14px;
}

/* Tablet / telefono: tipografia e touch più comodi */
@media (max-width: 900px) {
  :root {
    --font-size-xs:    12px;
    --font-size-sm:    14px;
    --font-size-base:  16px;
    --font-size-md:    16px;
    --font-size-rg:    17px;
    --font-size-lg:    18px;
    --font-size-lead:  19px;
    --font-size-ui:    20px;
    --font-size-xl:    20px;
    --font-size-2xl:   22px;
    --font-size-3xl:   24px;
    --font-size-4xl:   26px;

    --space-md:  14px;
    --space-lg:  18px;
    --space-xl:  22px;

    --nav-height:       44px;
    --toolbar-height:   48px;
    --form-label-width: 100%;
    --input-width:      100%;
    --page-pad-x:       12px;
    --page-pad-y:       10px;
    --touch-min:        44px;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-base: 16px;
    --font-size-md:   16px;
    --font-size-rg:   17px;
    --page-pad-x:     10px;
  }
}

/* App installata (PWA standalone): niente chrome browser → più spazio utile */
@media (display-mode: standalone), (display-mode: fullscreen) {
  :root {
    --page-pad-y: 10px;
  }
}