/**
 * Design tokens for the macOS-inspired professional editor UI.
 *
 * Every other stylesheet reads from these variables rather than hard-coding
 * colour/spacing/radius values — which is also what makes a future dark mode
 * a token swap rather than a rewrite (redesign §32: "Design the architecture
 * so dark mode can be added later. Use CSS variables for colours.").
 *
 * The accent moved from iOS blue (#0071E3) to a premium purple (#6D4AFF) in
 * the 2.1.0 redesign. Purple is deliberately RARE here — it means exactly one
 * of four things (active, selected, primary action, important state) and
 * nothing else, so it keeps its signalling value instead of becoming
 * decoration (redesign §26: "Do not overuse purple").
 *
 * Variable NAMES are unchanged from the pre-redesign token set even where
 * their values changed, so no stylesheet or inline style referencing
 * --eps-accent / --eps-border / --eps-surface-sunken / etc. needed touching
 * to pick up the new palette.
 */
.eps-root, .eps-wrap {
  --eps-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Neutrals — warm-white app background, pure-white surfaces, hairline greys */
  --eps-bg: #F7F7F8;
  --eps-surface: #FFFFFF;
  --eps-surface-translucent: rgba(255, 255, 255, 0.78);
  --eps-surface-sunken: #F2F2F5;
  --eps-surface-raised: #FFFFFF;
  --eps-border: #E5E5EA;
  --eps-border-subtle: #EFEFF2;
  --eps-border-strong: #D6D6DC;
  /* The canvas viewport's own backdrop — very light warm grey, so the white
     design surface reads as a physical sheet sitting on top of it (§13). */
  --eps-canvas-backdrop: #F4F4F6;
  --eps-canvas-surface: #FFFFFF;

  /* Text */
  --eps-text-primary: #1D1D1F;
  --eps-text-secondary: #6E6E73;
  --eps-text-tertiary: #96969D;
  --eps-text-on-accent: #FFFFFF;

  /* Accent — active / selected / primary action / important state ONLY */
  --eps-accent: #6D4AFF;
  --eps-accent-soft: #F0ECFF;
  --eps-accent-softer: rgba(109, 74, 255, 0.07);
  --eps-accent-strong: #5A38E8;
  --eps-accent-ring: rgba(109, 74, 255, 0.18);

  /* State */
  --eps-warning: #E5484D;
  --eps-warning-soft: rgba(229, 72, 77, 0.10);
  --eps-success: #30A46C;
  --eps-success-soft: rgba(48, 164, 108, 0.12);
  --eps-pending: #B7791F;

  /* Radii — §29: panels 12, floating controls 10, buttons 8 */
  --eps-radius-xs: 6px;
  --eps-radius-sm: 8px;
  --eps-radius-md: 10px;
  --eps-radius-lg: 12px;
  --eps-radius-xl: 14px;
  --eps-radius-pill: 999px;

  /* Spacing scale */
  --eps-space-1: 4px;
  --eps-space-2: 8px;
  --eps-space-3: 12px;
  --eps-space-4: 16px;
  --eps-space-5: 24px;
  --eps-space-6: 32px;

  /* Elevation — §29: subtle, never Material-Design-heavy */
  --eps-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --eps-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --eps-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --eps-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05);
  /* The design sheet itself gets a slightly crisper edge than UI chrome so it
     reads as a physical object rather than another panel. */
  --eps-shadow-canvas: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 28px rgba(0, 0, 0, 0.07);

  /* Motion — §30: 120–180ms, ease-out */
  --eps-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --eps-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --eps-duration-fast: 120ms;
  --eps-duration-base: 160ms;
  --eps-duration-slow: 180ms;

  /* Shell metrics — read by editor.css AND by canvas.css (ruler gutters),
     so the two can never drift apart by editing only one of them. */
  --eps-header-h: 60px;
  --eps-statusbar-h: 34px;
  --eps-nav-w: 76px;
  --eps-library-w: 320px;
  --eps-inspector-w: 300px;
  --eps-ruler-size: 22px;

  font-family: var(--eps-font);
  color: var(--eps-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * Dark mode was already present before the redesign (auto, via
 * prefers-color-scheme, on .eps-theme-auto — which only templates/editor.php
 * adds, so this applies in wp-admin and not on the front-end Studio page).
 * §32 says not to ADD full dark mode as part of this redesign, but removing
 * what already worked would be a regression, so it's kept and its values
 * simply re-derived from the new palette.
 */
@media (prefers-color-scheme: dark) {
  .eps-root.eps-theme-auto, .eps-root.eps-theme-dark {
    --eps-bg: #17171A;
    --eps-surface: #202024;
    --eps-surface-translucent: rgba(32, 32, 36, 0.78);
    --eps-surface-sunken: #191A1D;
    --eps-surface-raised: #26262B;
    --eps-border: #2E2E34;
    --eps-border-subtle: #26262B;
    --eps-border-strong: #3A3A42;
    --eps-canvas-backdrop: #141416;
    --eps-text-primary: #F2F2F5;
    --eps-text-secondary: #A0A0A8;
    --eps-text-tertiary: #74747C;
    --eps-accent: #8B6DFF;
    --eps-accent-soft: rgba(139, 109, 255, 0.16);
    --eps-accent-softer: rgba(139, 109, 255, 0.08);
    --eps-accent-strong: #7A57FF;
  }
}

.eps-root *, .eps-wrap .eps-editor * { box-sizing: border-box; }

/* §38: visible focus states are non-negotiable. :focus-visible (not :focus)
   so a mouse click on a button doesn't leave a ring behind, while keyboard
   navigation always shows exactly where focus is. */
.eps-root :focus-visible,
.eps-wrap .eps-editor :focus-visible {
  outline: 2px solid var(--eps-accent);
  outline-offset: 2px;
  border-radius: var(--eps-radius-xs);
}

/* Icons are always tinted by their parent's text colour — never their own
   fixed colour — which is the whole reason inline SVG replaced emoji (see
   assets/js/ui/icons.js). */
.eps-icon { display: block; flex: none; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .eps-root *, .eps-wrap .eps-editor * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Cursor affordance for rows using ui/drag-scroll.js (a hidden-scrollbar
   row made operable by click-and-drag for mouse users — see that file's
   doc comment). grab/grabbing mirrors the same convention the canvas Hand
   tool already uses, so the interaction reads consistently across the app. */
.eps-chip-row, .eps-element-strip, .eps-canvas-toolbar, .eps-object-toolbar {
  cursor: grab;
}
.eps-chip-row.is-drag-scrolling,
.eps-element-strip.is-drag-scrolling,
.eps-canvas-toolbar.is-drag-scrolling,
.eps-object-toolbar.is-drag-scrolling {
  cursor: grabbing;
}
/* Individual chips/tool buttons/element cards keep a normal pointer cursor —
   only the row itself (empty space between them, and a press-drag anywhere,
   per drag-scroll.js's own DRAG_THRESHOLD) should look "grabbable". Scoped
   to `button` specifically, not a blanket `> *`, since .eps-object-toolbar's
   direct children are mostly field-wrapper spans around an editable
   <input> — those shouldn't visually suggest "click to activate" over a
   text field. */
.eps-chip-row button, .eps-element-strip button,
.eps-canvas-toolbar button, .eps-object-toolbar button {
  cursor: pointer;
}