/**
 * Pede Com Nóis — design tokens compartilhados
 * Hub · Hub Admin · Pedidos · cardápio light
 *
 * Marca: azul #0757A6 · laranja #F58220 · escuro #070b12
 */

:root {
  /* Paleta fixa */
  --pcn-blue: #0757A6;
  --pcn-blue-dark: #064a8d;
  --pcn-blue-darker: #053d75;
  --pcn-blue-light: #0a6bc4;
  --pcn-blue-soft: #e8f2fb;
  --pcn-orange: #F58220;
  --pcn-orange-soft: #fff4e8;
  --pcn-orange-legacy: #ff7900;
  --pcn-orange-legacy2: #ff9b23;
  --pcn-navy: #070b12;
  --pcn-navy2: #101820;
  --pcn-navy3: #0e1620;
  --pcn-navy-sidebar: #05080e;
  --pcn-navy-sidebar2: #0a1018;
  --pcn-navy-panel: #151d28;
  --pcn-yellow: #ffd400;
  --pcn-green: #22a96b;
  --pcn-ink: #172536;
  --pcn-ink-order: #1a2332;
  --pcn-muted: #69788b;
  --pcn-muted-order: #6b7a8c;
  --pcn-line: #dfe7ef;
  --pcn-line-order: #e4eaf0;
  --pcn-line-blue: #d4e3f0;
  --pcn-bg-page: #e8eef4;
  --pcn-bg-light: #f4f8fc;
  --pcn-bg-order: #f5f7fa;
  --pcn-card: #fff;
  --pcn-light: #f4f7fb;
  --pcn-shadow: 0 16px 40px rgba(7, 25, 42, 0.12);
  --pcn-shadow-blue: 0 8px 28px rgba(7, 87, 166, 0.08);
  --pcn-shadow-soft: 0 4px 16px rgba(26, 35, 50, 0.06);
  --pcn-radius: 16px;
  --pcn-ok: #166534;
  --pcn-ok-bg: #dcfce7;
  --pcn-err: #991b1b;
  --pcn-err-bg: #fee2e2;
  --pcn-meta-dark: #070b12;
  --pcn-meta-light: #0757A6;
}

/* —— Tema escuro (padrão: hub + pedidos lua) —— */
:root,
html.pcn-theme-dark,
html.pd-theme-dark {
  --pcn-accent: var(--pcn-orange-legacy);
  --pcn-accent2: var(--pcn-orange-legacy2);
  --pcn-accent-rgb: 255, 121, 0;
  --pcn-brand: var(--pcn-orange-legacy);
  --pcn-theme-color: var(--pcn-meta-dark);
  --pcn-bg: var(--pcn-bg-page);
  --pcn-text: var(--pcn-ink);
  --pcn-border: var(--pcn-line);

  /* Aliases legados (hub-app.css) */
  --navy: var(--pcn-navy);
  --navy2: var(--pcn-navy2);
  --orange: var(--pcn-accent);
  --orange2: var(--pcn-accent2);
  --yellow: var(--pcn-yellow);
  --light: var(--pcn-light);
  --line: var(--pcn-border);
  --text: var(--pcn-text);
  --muted: var(--pcn-muted);
  --green: var(--pcn-green);
  --shadow: var(--pcn-shadow);
  --radius: var(--pcn-radius);
  --ok: var(--pcn-ok);
  --ok-bg: var(--pcn-ok-bg);
  --err: var(--pcn-err);
  --err-bg: var(--pcn-err-bg);

  /* Aliases pedidos (app.css) */
  --accent: var(--pcn-accent);
  --accent-rgb: var(--pcn-accent-rgb);
  --bg: var(--pcn-bg);
  --brand: var(--pcn-brand);
  --brand-ink: #fff;
  --card: var(--pcn-card);
  --ink: var(--pcn-text);
  --danger: var(--pcn-err);

  /* Shell lateral (pedidos + hub admin) */
  --pcn-side-bg: linear-gradient(180deg, var(--pcn-navy-sidebar) 0%, var(--pcn-navy-sidebar2) 55%, var(--pcn-navy3) 100%);
  --pcn-side-fg: #fff;
  --pcn-side-muted: rgba(255, 255, 255, .38);
  --pcn-side-link: rgba(255, 255, 255, .78);
  --pcn-side-link-icon: rgba(255, 255, 255, .55);
  --pcn-side-border: rgba(255, 255, 255, .08);
  --pcn-side-hover: rgba(255, 255, 255, .06);
  --pcn-side-active-bg: linear-gradient(135deg, rgba(255, 121, 0, .95), rgba(255, 155, 35, .9));
  --pcn-side-active-shadow: 0 8px 18px rgba(255, 121, 0, .28);
  --pcn-auth-bg:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 121, 0, .18), transparent),
    linear-gradient(180deg, var(--pcn-navy-sidebar) 0%, var(--pcn-navy3) 40%, var(--pcn-bg-page) 40%);
  --pcn-btn-shadow: 0 8px 18px rgba(255, 121, 0, .22);
  --pcn-overlay: rgba(7, 11, 18, .55);

  /* Aliases pedidos */
  --pd-theme-color: var(--pcn-meta-dark);
  --pd-btn-shadow: var(--pcn-btn-shadow);
  --pd-side-bg: var(--pcn-side-bg);
  --pd-side-fg: var(--pcn-side-fg);
  --pd-side-muted: var(--pcn-side-muted);
  --pd-side-link: var(--pcn-side-link);
  --pd-side-link-icon: var(--pcn-side-link-icon);
  --pd-side-border: var(--pcn-side-border);
  --pd-side-hover: var(--pcn-side-hover);
  --pd-side-active-bg: var(--pcn-side-active-bg);
  --pd-side-active-shadow: var(--pcn-side-active-shadow);
  --pd-auth-bg: var(--pcn-auth-bg);
  --pd-toast-bg: #0f172a;
  --pd-pdv-bar-bg:
    linear-gradient(135deg, rgba(255, 121, 0, .12), transparent 42%),
    linear-gradient(180deg, var(--pcn-navy2) 0%, var(--pcn-navy) 100%);
  --pd-pdv-bar-fg: #fff;
  --pd-pdv-bar-muted: rgba(255, 255, 255, .72);
  --pd-pdv-ghost-bg: rgba(255, 255, 255, .08);
  --pd-pdv-ghost-border: rgba(255, 255, 255, .18);
}

/* —— Tema claro azul (pedidos sol + cardápio hub) —— */
html.pcn-theme-light,
html.pd-theme-light,
.hub-order-light {
  --pcn-accent: var(--pcn-blue);
  --pcn-accent2: var(--pcn-blue-light);
  --pcn-accent-rgb: 7, 87, 166;
  --pcn-brand: var(--pcn-orange);
  --pcn-theme-color: var(--pcn-meta-light);
  --pcn-bg: var(--pcn-bg-light);
  --pcn-text: var(--pcn-ink);
  --pcn-border: var(--pcn-line-blue);

  --navy: var(--pcn-blue);
  --navy2: var(--pcn-blue-dark);
  --orange: var(--pcn-blue);
  --orange2: var(--pcn-blue-light);
  --line: var(--pcn-border);
  --text: var(--pcn-text);
  --muted: var(--pcn-muted-order);

  --accent: var(--pcn-accent);
  --accent-rgb: var(--pcn-accent-rgb);
  --bg: var(--pcn-bg);

  --pd-theme-color: var(--pcn-meta-light);
  --pd-btn-shadow: 0 8px 18px rgba(7, 87, 166, .22);
  --pcn-side-bg: linear-gradient(180deg, var(--pcn-blue) 0%, var(--pcn-blue-dark) 55%, var(--pcn-blue-darker) 100%);
  --pcn-side-muted: rgba(255, 255, 255, .55);
  --pcn-side-link: rgba(255, 255, 255, .88);
  --pcn-side-link-icon: rgba(255, 255, 255, .65);
  --pcn-side-border: rgba(255, 255, 255, .12);
  --pcn-side-hover: rgba(255, 255, 255, .1);
  --pcn-side-active-bg: linear-gradient(135deg, var(--pcn-orange), #ff9b4a);
  --pcn-side-active-shadow: 0 8px 18px rgba(245, 130, 32, .32);
  --pcn-auth-bg:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(7, 87, 166, .14), transparent),
    linear-gradient(180deg, var(--pcn-blue) 0%, var(--pcn-blue-dark) 38%, var(--pcn-bg-light) 38%);
  --pcn-btn-shadow: 0 8px 18px rgba(7, 87, 166, .22);

  --pd-side-bg: var(--pcn-side-bg);
  --pd-side-fg: var(--pcn-side-fg);
  --pd-side-muted: var(--pcn-side-muted);
  --pd-side-link: var(--pcn-side-link);
  --pd-side-link-icon: var(--pcn-side-link-icon);
  --pd-side-border: var(--pcn-side-border);
  --pd-side-hover: var(--pcn-side-hover);
  --pd-side-active-bg: var(--pcn-side-active-bg);
  --pd-side-active-shadow: var(--pcn-side-active-shadow);
  --pd-auth-bg: var(--pcn-auth-bg);
  --pd-toast-bg: var(--pcn-blue);
  --pd-pdv-bar-bg:
    linear-gradient(135deg, rgba(245, 130, 32, .14), transparent 42%),
    linear-gradient(180deg, var(--pcn-blue) 0%, var(--pcn-blue-dark) 100%);
  --pd-pdv-bar-fg: #fff;
  --pd-pdv-bar-muted: rgba(255, 255, 255, .82);
  --pd-pdv-ghost-bg: rgba(255, 255, 255, .12);
  --pd-pdv-ghost-border: rgba(255, 255, 255, .22);
}

/* Cardápio light — tokens semânticos extras */
.hub-order-light {
  --pcn-ink: var(--pcn-ink-order);
  --pcn-muted: var(--pcn-muted-order);
  --pcn-line: var(--pcn-line-order);
  --pcn-bg: var(--pcn-bg-order);
}

/* Fila pedidos (dl-admin) */
html.pd-theme-light .dl-admin,
.hub-order-light .dl-admin {
  --dl-a-primary: var(--pcn-blue);
  --dl-a-primary-dark: var(--pcn-blue-dark);
  --dl-a-accent: var(--pcn-orange);
  --dl-a-bg: var(--pcn-bg-light);
  --dl-a-border: var(--pcn-line-blue);
}

/* —— Toggle lua/sol (admin · pedidos · login) —— */
.pcn-theme-switch {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
}
.pcn-theme-switch__btn {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  transition: background .15s ease, color .15s ease;
}
.pcn-theme-switch__btn:hover {
  color: var(--text);
  background: var(--light);
}
.pcn-theme-switch__btn.is-active {
  color: #fff;
}
html.pcn-theme-dark .pcn-theme-switch__btn[data-pcn-theme="dark"].is-active,
html.pd-theme-dark .pcn-theme-switch__btn[data-pcn-theme="dark"].is-active {
  background: linear-gradient(135deg, var(--pcn-orange-legacy), var(--pcn-orange-legacy2));
}
html.pcn-theme-light .pcn-theme-switch__btn[data-pcn-theme="light"].is-active,
html.pd-theme-light .pcn-theme-switch__btn[data-pcn-theme="light"].is-active {
  background: linear-gradient(135deg, var(--pcn-blue), var(--pcn-blue-light));
}

.pd-side .pcn-theme-switch,
.ha-side .pcn-theme-switch {
  width: 100%;
  margin-bottom: .65rem;
  display: none;
}
.pd-side .pcn-theme-switch__btn,
.ha-side .pcn-theme-switch__btn {
  flex: 1;
}

@media (max-width: 960px) {
  .pd-topbar__right > .pcn-theme-switch { display: none; }
  .pd-side .pcn-theme-switch { display: inline-flex; }
}

@media (max-width: 991.98px) {
  .ha-topbar__right > .pcn-theme-switch { display: none; }
  .ha-side .pcn-theme-switch { display: inline-flex; }
}

body.pd-auth .pcn-theme-switch,
body.ha-login .pcn-theme-switch {
  position: fixed;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: 1rem;
  z-index: 20;
  box-shadow: var(--shadow);
}