/* Estúdio Pixel — UI pixel art (tan/beige, bordas duras) */

@import url("design-tokens.css");

@font-face {
  font-family: "Atlantis Text";
  src: url("/fonts/AtlantisText-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atlantis Text";
  src: url("/fonts/AtlantisText-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atlantis Headline";
  src: url("/fonts/AtlantisHeadline-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Tokens em css/design-tokens.css — publicar via script/API */

/* Tipografia — títulos (Headline), UI (Text Regular), ênfase (Text Bold) */
.panel-title,
.layer-panel-head__title,
.color-picker-drop__title,
.gallery-header h1,
.studio-modal .panel-title {
  font-family: var(--pix-font-headline);
  font-weight: var(--pix-font-weight-bold);
  line-height: var(--pix-line-height-tight);
}

.pix-btn--play,
.pix-btn--quit {
  font-weight: var(--pix-font-weight-bold);
}

.pix-tabs--studio .pix-tabs__btn.is-active,
.color-picker-drop__tab.is-active {
  font-weight: var(--pix-font-weight-bold);
}

/* ── Botões pixel — contorno uniforme (estilo desenho) ─── */

.pix-btn {
  --pix-fill: var(--pix-option-fill);
  --pix-border: var(--sprout-border);
  --pix-highlight: var(--pix-option-highlight);
  --pix-shade: var(--pix-option-shade);
  --pix-drop: var(--pix-option-drop);

  position: relative;
  display: inline-flex;
  vertical-align: middle;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--pix-font);
  font-size: var(--pix-font-wide);
  font-weight: var(--pix-font-weight);
  color: var(--pix-ink);
  cursor: pointer;
  letter-spacing: 0.02em;
}

.pix-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pix-btn__face {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--pix-fill);
  border-radius: var(--pix-radius);
  color: var(--pix-ink);
  border: 2px solid var(--sprout-border);
  transition: transform 0.05s steps(1), background 0.05s steps(1);
  box-shadow: var(--neo-raised);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.pix-btn__face::before,
.pix-btn__face::after {
  content: none;
}

.pix-btn__label {
  position: relative;
  z-index: 3;
  font-size: inherit;
  line-height: var(--pix-line-height);
  white-space: nowrap;
  color: var(--sprout-ink);
}

.pix-btn--wide .pix-btn__face {
  min-width: var(--pix-wide-min-w);
  min-height: var(--pix-btn-wide-h);
  padding: var(--pix-btn-pad-y) var(--pix-btn-pad-x);
  gap: var(--pix-btn-gap);
  overflow: visible;
}

.pix-btn--square .pix-btn__face,
.pix-btn--icon .pix-btn__face {
  width: var(--pix-btn-icon);
  height: var(--pix-btn-icon);
  min-width: var(--pix-btn-icon);
  min-height: var(--pix-btn-icon);
  padding: 0;
  display: grid;
  place-items: center;
}

.pix-btn--play {
  --pix-fill: var(--pix-play-fill);
  --pix-border: var(--pix-play-border);
  --pix-highlight: var(--pix-play-highlight);
  --pix-shade: var(--pix-play-shade);
  --pix-drop: var(--pix-play-drop);
}

.pix-btn--pause {
  --pix-fill: var(--pix-pause-fill);
  --pix-border: var(--pix-pause-border);
  --pix-highlight: var(--pix-pause-highlight);
  --pix-shade: var(--pix-pause-shade);
  --pix-drop: var(--pix-pause-drop);
}

.pix-btn--quit {
  --pix-fill: var(--pix-quit-fill);
  --pix-border: var(--pix-quit-border);
  --pix-highlight: var(--pix-quit-highlight);
  --pix-shade: var(--pix-quit-shade);
  --pix-drop: var(--pix-quit-drop);
}

.pix-btn--option {
  --pix-fill: var(--pix-option-fill);
  --pix-border: var(--pix-option-border);
  --pix-highlight: var(--pix-option-highlight);
  --pix-shade: var(--pix-option-shade);
  --pix-drop: var(--pix-option-drop);
}

.pix-btn--setting {
  --pix-fill: var(--pix-setting-fill);
  --pix-border: var(--pix-setting-border);
  --pix-highlight: var(--pix-setting-highlight);
  --pix-shade: var(--pix-setting-shade);
  --pix-drop: var(--pix-setting-drop);
}

.pix-btn:hover:not(:disabled) .pix-btn__face {
  background: var(--pix-highlight);
}

.pix-btn:active:not(:disabled) .pix-btn__face {
  background: var(--pix-shade);
  border-color: var(--sprout-border);
  box-shadow: none;
}

.pix-btn.is-active .pix-btn__face,
.pix-btn.is-pressed .pix-btn__face,
.pix-btn[aria-pressed="true"] .pix-btn__face {
  transform: none;
  background: var(--pix-selected-bg);
  border-color: var(--sprout-border);
  box-shadow: var(--pix-selected-shadow);
}

/* ── Seleccionado / toggle — padrão pin (realce topo + esquerda) ── */

.dock-hud-tool.is-active,
.dock-hud-tool.is-shape-active,
.dock-pin[aria-pressed="true"],
.dock-shapes-toggle.is-open,
.nav-tool.is-active,
.nav-tool[aria-pressed="true"],
.layer-lock.is-active,
.layer-lock[aria-pressed="true"],
.layer-lock--compact.is-active,
.layer-alpha.is-active,
#studio-layer-alpha-lock.is-active,
.color-picker-drop__tab.is-active {
  background: var(--pix-selected-bg);
  border-color: var(--sprout-border);
  box-shadow: var(--pix-selected-shadow);
  outline: none;
  isolation: isolate;
}

.dock-color-trigger[aria-expanded="true"] {
  border-color: var(--sprout-border);
  box-shadow: var(--pix-selected-shadow);
  outline: none;
}

.dock-hud-tool.is-active .dock-tool-icon,
.dock-hud-tool.is-active .pix-icon,
.dock-hud-tool.is-shape-active .dock-tool-icon,
.dock-hud-tool.is-shape-active .pix-icon,
.dock-pin[aria-pressed="true"] .pix-icon,
.dock-shapes-toggle.is-open .dock-tool-icon,
.dock-shapes-toggle.is-open .pix-icon,
.nav-tool.is-active .pix-icon,
.nav-tool[aria-pressed="true"] .pix-icon,
.layer-lock.is-active .pix-icon,
.layer-lock[aria-pressed="true"] .pix-icon,
.layer-lock--compact.is-active .pix-icon,
.layer-alpha.is-active .pix-icon,
#studio-layer-alpha-lock.is-active .pix-icon,
.color-picker-drop__tab.is-active .pix-icon,
.pix-btn.is-pressed .pix-icon,
.pix-btn[aria-pressed="true"] .pix-icon {
  filter: var(--pix-icon-filter-active);
  opacity: var(--pix-icon-opacity-active);
  mix-blend-mode: var(--pix-icon-blend-active);
}

.layer-alpha.is-active,
#studio-layer-alpha-lock.is-active,
.layer-lock--compact.is-active {
  color: var(--sprout-ink);
}

.dock-swatch.is-active,
.custom-palette-slot.is-filled.is-active,
.color-picker-drop__grid--library .dock-swatch.is-active {
  box-shadow: var(--pix-selected-shadow-swatch);
  outline: none;
}

.color-picker-drop__grid--library .dock-swatch.is-active {
  outline-offset: 0;
}

/* ── Ícones (Pixel Outline PNG) ───────────────────────── */

.pix-icon,
.dock-tool-icon,
.pix-icon--sm,
.pix-icon--md,
.pix-icon--lg {
  display: inline-block;
  flex-shrink: 0;
  line-height: 0;
  pointer-events: none;
  width: var(--pix-icon-size);
  height: var(--pix-icon-size);
  min-width: var(--pix-icon-size);
  min-height: var(--pix-icon-size);
  max-width: var(--pix-icon-size);
  max-height: var(--pix-icon-size);
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  vertical-align: middle;
  filter: var(--pix-icon-filter);
}

.nav-tool .pix-icon,
.pix-btn__face .pix-icon,
.bar-menu__item .pix-icon,
.bar-menu__action .pix-icon,
.layer-eye .pix-icon,
.layer-lock .pix-icon,
.layer-menu .pix-icon,
.color-picker-drop .pix-icon,
.custom-palette-slot .pix-icon {
  width: var(--pix-icon-size);
  height: var(--pix-icon-size);
}

.pix-icon--on-btn {
  opacity: 1;
}

.pix-icon--triangle { transform: rotate(-90deg); }

.pix-btn__face .pix-icon {
  position: relative;
  z-index: 3;
}

/* Superfícies */
.neo-surface,
.sprout-surface {
  background: var(--sprout-panel);
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  box-shadow: var(--neo-raised);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.neo-surface--inset,
.sprout-surface--inset {
  background: var(--sprout-panel-dark);
  box-shadow: var(--neo-inset);
}

/* Inputs */
.pix-input {
  font-family: var(--pix-font);
  font-size: var(--pix-font-sm);
  padding: 10px 12px;
  border: 2px solid var(--sprout-border);
  border-radius: var(--pix-radius);
  background: var(--sprout-panel-light);
  color: var(--sprout-ink);
  box-shadow: var(--neo-inset);
}

.pix-input:focus {
  outline: none;
  border-color: var(--sprout-active-dark);
  box-shadow:
    var(--neo-inset),
    0 0 0 2px color-mix(in srgb, var(--ep-primary-blue) 45%, transparent);
}

/* Toast */
.pt-toast {
  position: fixed;
  top: var(--studio-bar-h, 76px);
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  padding: 12px 20px;
  border-radius: var(--pix-radius);
  font-family: var(--pix-font);
  font-size: var(--pix-font-sm);
  font-weight: var(--pix-font-weight);
  line-height: var(--pix-line-height);
  color: var(--sprout-ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 500;
  border: 2px solid var(--sprout-border);
  box-shadow: none;
}

.pt-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.pt-toast--success {
  background: var(--pix-play-fill);
}

.pt-toast--error {
  background: var(--pix-quit-fill);
}

.pt-toast--info {
  background: var(--pix-pause-fill);
}

/* Showcase de botões (opcional em páginas de referência) */
.pix-ds-showcase {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  background: var(--sprout-bg);
  min-height: 100vh;
}

.pix-ds-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pix-ds-row__label {
  font-family: var(--pix-font);
  font-size: var(--pix-font-xs);
  color: var(--sprout-ink-muted);
  width: 56px;
  flex-shrink: 0;
}