/* ── Apple dark-mode system tokens (PIER design language) ───────────── */
:root {
  /* Backgrounds — 5-level depth */
  --bg:                   #1C1C1E;
  --bg-secondary:         #2C2C2E;
  --bg-tertiary:          #3A3A3C;
  --bg-grouped:           #000000;
  --bg-grouped-secondary: #1C1C1E;
  --bg-grouped-tertiary:  #2C2C2E;

  /* Fill layers */
  --fill-quaternary: rgba(118,118,128,0.18);
  --fill-tertiary:   rgba(118,118,128,0.24);
  --fill-secondary:  rgba(120,120,128,0.32);
  --fill-primary:    rgba(120,120,128,0.36);

  /* Labels */
  --label:            #FFFFFF;
  --label-secondary:  rgba(235,235,245,0.6);
  --label-tertiary:   rgba(235,235,245,0.55);
  --label-quaternary: rgba(235,235,245,0.16);

  /* Separators */
  --separator:      rgba(84,84,88,0.65);
  --separator-thin: rgba(84,84,88,0.45);

  /* Tints */
  --tint-blue:   #0A84FF;
  --tint-green:  #30D158;
  --tint-indigo: #5E5CE6;
  --tint-orange: #FF9F0A;
  --tint-pink:   #FF375F;
  --tint-purple: #BF5AF2;
  --tint-red:    #FF453A;
  --tint-teal:   #64D2FF;
  --tint-yellow: #FFD60A;

  /* Accent */
  --accent: var(--tint-blue);

  /* Shadows */
  --shadow-1:    0 0 0 0.5px rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.18);
  --shadow-2:    0 0 0 0.5px rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.32);
  --shadow-blur: 0 0 0 0.5px rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);

  /* Radius */
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      14px;
  --radius-xl:      20px;
  --radius:         6px;   /* universal control radius */
  --radius-lg-card: 10px;
  --radius-pill:    999px;

  /* Spacing — 4px scale */
  --space-2:  2px;  --space-4:  4px;  --space-6:  6px;  --space-8:  8px;
  --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px;
  --space-48: 48px;

  /* Sizing */
  --control-h:    36px;
  --control-h-sm: 28px;
  --toolbar-h:    48px;

  /* Typography */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, sans-serif;
  --font-mono:   ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Monaco, monospace;

  /* Legacy aliases (kept for any tool CSS that still references them) */
  --bg-deep:     #000000;
  --bg-surface:  var(--bg-secondary);
  --bg-elevated: var(--bg-tertiary);
  --border:             var(--separator-thin);
  --border-default:     var(--separator);
  --text:               var(--label-secondary);
  --text-bright:        var(--label);
  --text-secondary:     var(--label-secondary);
  --text-dim:           var(--label-tertiary);
  --status-error:       var(--tint-red);
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { height: 100%; }

body {
  background: var(--bg);
  color: var(--label);
  font-family: var(--font-system);
  font-size: 14px;
  line-height: 1.45;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.003em;
}

a { color: inherit; text-decoration: none; }

::selection {
  background: rgba(10,132,255,0.25);
  color: var(--label);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fill-secondary); border-radius: 3px; }
* { scrollbar-width: thin; scrollbar-color: var(--fill-secondary) transparent; }

/* ── Animations ────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

@keyframes dots {
  0%, 20%       { content: ''; }
  40%           { content: '.'; }
  60%           { content: '..'; }
  80%, 100%     { content: '...'; }
}

/* Stop iOS auto-zoom on all inputs */
input, select, textarea {
  font-size: 16px;
}

/* The `hidden` attribute must win over rules like `.wt-option-row { display: flex }`. */
[hidden] { display: none !important; }