/*
  Wortic macOS UI Kit — Demo page chrome
  NÃO é um componente do design system. É o "desktop" usado pelas
  páginas de catálogo (components/<nome>/<nome>.html) para exibir
  variantes/estados lado a lado — wallpaper frio desfocado, painéis
  brancos flutuantes, tipografia de app. Nenhum componente pode
  depender destas classes.
*/

@layer base {
  body.wm-demo {
    background: var(--wm-wallpaper, var(--wm-surface-base));
    background-attachment: fixed;
    color: var(--wm-label-primary);
    min-height: 100vh;
  }

  body.wm-demo ::selection {
    background: var(--wm-selection-bg);
  }

  /* Scrollbar fina em qualquer overflow interno das demos */
  body.wm-demo ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  body.wm-demo ::-webkit-scrollbar-track,
  body.wm-demo ::-webkit-scrollbar-corner {
    background: transparent;
  }
  body.wm-demo ::-webkit-scrollbar-thumb {
    background: var(--wm-scrollbar-thumb);
    border-radius: var(--wm-radius-pill);
    border: 3px solid transparent;
    background-clip: padding-box;
  }
  body.wm-demo ::-webkit-scrollbar-thumb:hover {
    background: var(--wm-scrollbar-thumb-hover);
    border-width: 2px;
    background-clip: padding-box;
  }

  .wm-demo-page {
    max-width: 1040px;
    margin: 0 auto;
    padding: var(--wm-space-12) var(--wm-space-10) var(--wm-space-14);
  }

  /* ============================================================
     HEADER — janela-hero flutuante, tipografia de app
     ============================================================ */
  .wm-demo-header {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--wm-space-12);
    padding: var(--wm-space-11) var(--wm-space-11) var(--wm-space-10);
    background: linear-gradient(
      180deg,
      var(--wm-surface-primary) 0%,
      var(--wm-surface-secondary) 100%
    );
    border: none;
    border-radius: var(--wm-radius-window, 22px);
    box-shadow: var(--wm-shadow-window, var(--wm-shadow-4)),
      var(--wm-shadow-inner-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.18));
  }

  /* Sem accent strip no topo — filete colorido em card é vocabulário
     Material/dashboard, não Apple. A marca vive no eyebrow e no glow. */

  /* Brilho discreto de accent no canto — vida, não ruído */
  .wm-demo-header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(52% 90% at 96% -20%, var(--wm-accent-fill), transparent 70%);
    opacity: 0.5;
  }

  .wm-demo-eyebrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-2);
    font-size: var(--wm-font-size-caption2);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-wide);
    text-transform: uppercase;
    color: var(--wm-accent);
    margin-bottom: var(--wm-space-5);
  }

  .wm-demo-title {
    position: relative;
    z-index: 1;
    font-size: var(--wm-font-size-large-title);
    font-weight: var(--wm-font-weight-bold);
    letter-spacing: var(--wm-letter-spacing-tighter, -0.02em);
    line-height: var(--wm-line-height-tight);
    margin-bottom: var(--wm-space-4);
  }

  .wm-demo-desc {
    position: relative;
    z-index: 1;
    font-size: var(--wm-font-size-callout);
    color: var(--wm-label-secondary);
    max-width: 640px;
    line-height: var(--wm-line-height-relaxed);
  }

  /* ============================================================
     SEÇÕES
     ============================================================ */
  .wm-demo-section {
    margin-bottom: var(--wm-space-13);
  }

  .wm-demo-section-title {
    font-size: var(--wm-font-size-title3);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-tight);
    margin-bottom: var(--wm-space-2);
    padding-left: var(--wm-space-2);
  }

  .wm-demo-section-desc {
    font-size: var(--wm-font-size-footnote);
    color: var(--wm-label-secondary);
    margin-bottom: var(--wm-space-6);
    padding-left: var(--wm-space-2);
    max-width: 640px;
  }

  /* Painel branco flutuante — a "bancada" onde o componente vive */
  .wm-demo-surface {
    background: var(--wm-surface-primary);
    border: none;
    border-radius: var(--wm-radius-panel, 16px);
    padding: var(--wm-space-9);
    box-shadow: var(--wm-shadow-panel, var(--wm-shadow-2)),
      var(--wm-shadow-inner-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.18));
  }

  .wm-demo-surface + .wm-demo-surface {
    margin-top: var(--wm-space-6);
  }

  .wm-demo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wm-space-6);
  }

  .wm-demo-row + .wm-demo-row {
    margin-top: var(--wm-space-8);
  }

  .wm-demo-col {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-6);
  }

  .wm-demo-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wm-space-3);
  }

  .wm-demo-label {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    font-weight: var(--wm-font-weight-medium);
    letter-spacing: 0.01em;
  }

  /* Bancada dark fixa (comparação lado a lado dentro do tema light).
     RE-ESCOPA os tokens semânticos dark — sem isto, componentes dentro
     da bancada herdariam accent/labels/fills do tema light da página.
     Manter em paridade com :root[data-theme="dark"] de colors.css. */
  .wm-demo-dark {
    background: #1c1c1f;
    color-scheme: dark;
    border-radius: var(--wm-radius-panel, 16px);
    padding: var(--wm-space-9);
    box-shadow:
      0 0 0 0.5px rgba(255, 255, 255, 0.09) inset,
      0 1px 2px rgba(0, 0, 0, 0.2),
      0 10px 24px -6px rgba(0, 0, 0, 0.35);

    --wm-label-primary: rgba(255, 255, 255, 0.94);
    --wm-label-secondary: rgba(255, 255, 255, 0.6);
    --wm-label-tertiary: rgba(255, 255, 255, 0.38);
    --wm-label-quaternary: rgba(255, 255, 255, 0.22);
    --wm-label-on-accent: #ffffff;

    --wm-fill-primary: rgba(255, 255, 255, 0.13);
    --wm-fill-secondary: rgba(255, 255, 255, 0.09);
    --wm-fill-tertiary: rgba(255, 255, 255, 0.06);
    --wm-fill-quaternary: rgba(255, 255, 255, 0.035);

    --wm-surface-base: #1c1c1f;
    --wm-surface-primary: #262629;
    --wm-surface-secondary: #212124;
    --wm-surface-tertiary: #2c2c30;
    --wm-surface-elevated: #2f2f33;
    --wm-surface-sidebar: #202023;
    --wm-surface-sunken: #161618;
    --wm-surface-overlay: rgba(38, 38, 41, 0.85);

    --wm-separator: rgba(255, 255, 255, 0.08);
    --wm-separator-strong: rgba(255, 255, 255, 0.15);
    --wm-separator-opaque: #3a3a3e;

    --wm-accent: #1d59f0;
    --wm-accent-hover: #548dff;
    --wm-accent-pressed: #2a63e6;
    --wm-accent-fill: rgba(61, 123, 255, 0.18);
    --wm-accent-fill-strong: rgba(61, 123, 255, 0.3);

    --wm-accent-gradient: linear-gradient(180deg, #5a90ff 0%, #1d59f0 62%, #366fef 100%);
    --wm-brand-gradient: linear-gradient(135deg, #1d59f0 0%, #2ac2f3 100%);

    --wm-success: #32d074;
    --wm-success-fill: rgba(50, 208, 116, 0.16);
    --wm-warning: #e2a53d;
    --wm-warning-fill: rgba(226, 165, 61, 0.16);
    --wm-error: #ff6b60;
    --wm-error-fill: rgba(255, 107, 96, 0.16);
    --wm-info: #5a9bff;
    --wm-info-fill: rgba(90, 155, 255, 0.16);

    --wm-shadow-color: 220deg 30% 2%;
    --wm-shadow-ring: 0 0 0 0.5px rgba(255, 255, 255, 0.08);
    --wm-shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --wm-shadow-inner-hairline: inset 0 0 0 0.5px rgba(255, 255, 255, 0.09);

    --wm-material-sidebar-bg: rgba(28, 28, 32, 0.6);
    --wm-material-toolbar-bg: rgba(34, 34, 38, 0.6);
    --wm-material-popover-bg: rgba(40, 40, 44, 0.72);
    --wm-material-sheet-bg: rgba(34, 34, 38, 0.84);
    --wm-material-hud-bg: rgba(18, 18, 20, 0.78);
    --wm-material-glass-border: rgba(255, 255, 255, 0.14);

    --wm-scrollbar-thumb: rgba(255, 255, 255, 0.22);
    --wm-scrollbar-thumb-hover: rgba(255, 255, 255, 0.34);

    --wm-selection-bg: rgba(61, 123, 255, 0.32);
  }

  /* ============================================================
     RODAPÉ + CHROME
     ============================================================ */
  .wm-demo-footer {
    margin-top: var(--wm-space-14);
    padding-top: var(--wm-space-7);
    border-top: var(--wm-border-width-hairline) solid var(--wm-separator);
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--wm-space-6);
  }

  .wm-demo-footer a {
    color: var(--wm-accent);
    transition: opacity var(--wm-duration-fast) var(--wm-ease-standard);
  }

  .wm-demo-footer a:hover {
    opacity: 0.75;
  }

  .wm-demo-theme-toggle {
    position: fixed;
    top: var(--wm-space-6);
    right: var(--wm-space-6);
    z-index: var(--wm-z-toast);
  }

  code.wm-demo-code {
    font-family: var(--wm-font-family-mono);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    background: var(--wm-fill-tertiary);
    box-shadow: inset 0 0 0 0.5px var(--wm-separator);
    padding: 1.5px 6px;
    border-radius: var(--wm-radius-sm);
  }

  @media (max-width: 720px) {
    .wm-demo-page {
      padding: var(--wm-space-10) var(--wm-space-8) var(--wm-space-12);
    }

    .wm-demo-header {
      padding: var(--wm-space-10) var(--wm-space-9) var(--wm-space-9);
    }
  }
}