/**
 * Builder design tokens — the single source of truth for `--pb-*` custom
 * properties. Imported BEFORE every other builder stylesheet (see index.html)
 * so the whole chrome resolves against one token set.
 *
 * Taxonomy (all values live in the `:root` block below):
 *   • Base surfaces/text  — --pb-bg, --pb-surface(-2/-3), --pb-text(-bright/-dim)
 *   • Accent              — --pb-accent(-hover/-subtle/-muted/-glow); toolbar,
 *                           palette and primary CTAs. Intentionally NOT the
 *                           selection accents below.
 *   • Selection hierarchy — --pb-accent-section (violet #8B5CF6) for SECTION
 *                           selection, --pb-accent-element (sky #0EA5E9) for
 *                           ELEMENT selection, each with a -subtle tint. Drives
 *                           the glass-overlay two-color outline system. Rule of
 *                           thumb: section-scoped chrome (section list, section-
 *                           properties drawers) reads violet; element-scoped
 *                           chrome (element glass panels, inline editing) reads
 *                           blue. Keep the two distinct — do not collapse them
 *                           onto --pb-accent.
 *   • Semantic            — --pb-danger(-hover/-muted/-rgb), --pb-success,
 *                           --pb-warning(-icon)
 *   • Z-index scale       — --pb-z-base … --pb-z-toast (never hard-code z-index)
 *   • Typography          — --pb-font-xs … --pb-font-4xl
 *   • Radius              — --pb-radius(-sm/-md/-lg/-pill/-island/-chip)
 *   • Spacing             — --pb-space-1 … --pb-space-12
 *   • Shadows             — --pb-shadow-{panel,dropdown,popover,modal}
 *   • Drag/drop, panel-left, section-properties, drawer surfaces
 *
 * Scoped overrides are intentional and stay in their own sheets — they are
 * local design scales, not drift:
 *   • `.pb-props-body` (property-panel.css) — larger "breathing room" scale.
 *   • `.pb-glass-panel` (glass-panels.css)  — softer dropdown shadow.
 * The forced-colors and reduced-transparency `:root` blocks below keep theming
 * cohesive; move them together with the base block if this file is ever split.
 *
 * All variables prefixed --pb-* to avoid conflicts with CodeStitch :root vars.
 */

:root {
  --pb-bg: #f0f1f3;
  --pb-surface: #ffffff;
  --pb-surface-hover: #f3f4f6;
  --pb-border: #d1d5db;
  --pb-text: #374151;
  --pb-text-bright: #111827;
  --pb-text-dim: #6b7280;
  --pb-accent: #0078d4;
  --pb-accent-hover: #006cbd;
  --pb-on-accent: #ffffff;
  --pb-accent-subtle: #6ea8d7; /* fallback for engines without color-mix() */
  --pb-accent-subtle: color-mix(in srgb, var(--pb-accent) 55%, var(--pb-text-dim));

  /* Selection-hierarchy accents — section vs element. Used by glass-overlay
     for the two-color outline system. Untouched: --pb-accent (toolbar, palette,
     primary CTAs all keep their current accent). */
  --pb-accent-section: #8B5CF6; /* violet-500 — section selection */
  --pb-accent-element: #0EA5E9; /* sky-500 — element selection */
  --pb-accent-section-subtle: rgba(139, 92, 246, 0.24); /* fallback */
  --pb-accent-section-subtle: color-mix(in srgb, var(--pb-accent-section) 24%, transparent);
  --pb-accent-element-subtle: rgba(14, 165, 233, 0.24); /* fallback */
  --pb-accent-element-subtle: color-mix(in srgb, var(--pb-accent-element) 24%, transparent);

  --pb-danger: #ef4444;
  --pb-danger-rgb: 239, 68, 68;
  --pb-danger-hover: #dc2626;
  --pb-success: #16a34a;
  --pb-panel-width-left: 452px; /* Desktop left panel width */
  --pb-canvas-open-offset: calc(var(--pb-panel-width-left) / 2);
  --pb-sidebar-width: 56px;
  --pb-toolbar-height: 56px;
  --pb-toolbar-bg: rgba(255, 255, 255, 0.78);
  --pb-toolbar-blur: 20px;
  --pb-segmented-track: rgba(17, 24, 39, 0.07);
  --pb-segmented-thumb: rgba(255, 255, 255, 0.92);
  --pb-chip-bg: rgba(255, 255, 255, 0.66);
  --pb-chip-bg-hover: rgba(255, 255, 255, 0.94);
  --pb-radius: 4px;
  --pb-transition: 0.15s ease;
  --pb-transition-slow: 0.2s ease;
  --pb-transition-spring: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  --pb-transition-skeleton: 1.5s;
  --pb-active-scale: 0.96;
  --pb-accent-tint: rgba(0, 120, 212, 0.08);
  --pb-input-error-bg: rgba(var(--pb-danger-rgb), 0.08);

  /* ── Icon-button sizing ── */
  --pb-icon-btn: 28px;
  --pb-icon-btn-sm: 20px;

  /* ── Z-index scale ── */
  --pb-z-base: 1;
  --pb-z-raised: 10;
  --pb-z-popover: 100;
  --pb-z-dropdown: 200;
  --pb-z-context-menu: 250;
  --pb-z-modal: 300;
  --pb-z-toolbar-float: 400;
  --pb-z-toast: 500;

  /* ── Surfaces (elevated tiers) ── */
  --pb-surface-2: #f8fafc;
  --pb-surface-3: #e5e7eb;
  --pb-bg-elevated: #ffffff;

  /* ── Interactive states ── */
  --pb-bg-hover: rgba(17, 24, 39, 0.06);
  --pb-hover: var(--pb-bg-hover);
  --pb-scrollbar-hover: #9ca3af;

  /* ── Semantic colors ── */
  --pb-warning: #b45309;
  --pb-warning-icon: #d97706;

  /* ── Recovery banner ── */
  --pb-recovery-bg: #fff8e6;
  --pb-recovery-border: #f3d9a2;

  /* ── Content areas (white bg for thumbnails/previews/iframe) ── */
  --pb-content-bg: #fff;
  --pb-content-placeholder: #4b5563;

  /* ── Shadows ── */
  --pb-shadow-panel: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
  --pb-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  --pb-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  --pb-shadow-modal: 0 12px 36px rgba(0, 0, 0, 0.18);
  --pb-overlay-bg: rgba(15, 23, 42, 0.4);

  /* ── Drag & drop ── */
  --pb-drag-ghost-bg: var(--pb-surface);
  --pb-drag-ghost-border: var(--pb-accent);
  --pb-drag-ghost-shadow: 0 4px 16px rgba(0, 120, 212, 0.25);
  --pb-drag-ghost-shadow: 0 4px 16px color-mix(in srgb, var(--pb-accent) 25%, transparent);
  --pb-drag-ghost-opacity: 0.92;
  --pb-drop-zone-color: var(--pb-accent);
  --pb-drop-zone-glow: var(--pb-accent-glow);
  --pb-drop-zone-height-active: 8px;
  --pb-transition-drag: 0.2s ease;

  /* ── Accent-derived translucent backgrounds ── */
  --pb-accent-muted: rgba(0, 120, 212, 0.08);
  --pb-accent-muted: color-mix(in srgb, var(--pb-accent) 8%, transparent);
  --pb-accent-glow: rgba(0, 120, 212, 0.2);
  --pb-accent-glow: color-mix(in srgb, var(--pb-accent) 20%, transparent);
  --pb-danger-muted: rgba(var(--pb-danger-rgb), 0.12);
  --pb-badge-manual-bg: rgba(0, 120, 212, 0.12);
  --pb-badge-manual-bg: color-mix(in srgb, var(--pb-accent) 12%, transparent);
  --pb-badge-auto-bg: rgba(17, 24, 39, 0.06);
  --pb-shared-bg: rgba(17, 24, 39, 0.03);

  /* ── Typography scale ── */
  --pb-font-xs:   10px;
  --pb-font-sm:   11px;
  --pb-font-base: 12px;
  --pb-font-md:   13px;
  --pb-font-lg:   14px;
  --pb-font-xl:   15px;
  --pb-font-2xl:  18px;
  --pb-font-3xl:  20px;
  --pb-font-4xl:  24px;

  /* ── Border-radius tiers ── */
  --pb-radius-sm:   3px;
  --pb-radius-md:   6px;
  --pb-radius-lg:   8px;
  --pb-radius-pill: 999px;
  --pb-radius-island: 12px;
  --pb-radius-chip: 10px;
  --pb-canvas-radius: var(--pb-radius-chip);

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

  /* ── Hover outline ── */
  --pb-shadow-ring: 0 0 0 1px var(--pb-accent);
  --pb-shadow-glow: 0 0 0 1px var(--pb-accent), 0 0 6px var(--pb-accent-glow);

  /* ── Panel-left overhaul (Phase 0 — visual foundation) ── */
  /* Glass surface for .pb-panel-left. Opaque fallback at --pb-surface lives on
     the element itself; --pb-panel-bg is the translucent tint applied only when
     backdrop-filter is supported AND prefers-reduced-transparency is not set. */
  --pb-panel-bg: rgba(255, 255, 255, 0.82);
  --pb-panel-blur: 20px;
  --pb-panel-divider: rgba(17, 24, 39, 0.08);

  /* Section-list row cards */
  --pb-row-bg: var(--pb-surface);
  --pb-row-bg-hover: var(--pb-surface-hover);
  --pb-row-bg-selected: var(--pb-accent-muted);
  --pb-row-bg-active: var(--pb-surface-hover);
  --pb-row-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 1px 1px rgba(17, 24, 39, 0.03);
  --pb-row-shadow-hover: 0 2px 6px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  --pb-row-stripe-active: 2px solid var(--pb-accent);

  /* Subtle warm tint for shared (nav/footer) cards */
  --pb-shared-tint: rgba(180, 83, 9, 0.04);

  /* Scope breadcrumb pill segments (Phase 1b — tokens land in Phase 0) */
  --pb-scope-pill-bg: rgba(17, 24, 39, 0.05);
  --pb-scope-pill-fg: var(--pb-text);

  /* Top-zone search input (Phase 1b — tokens land in Phase 0) */
  --pb-search-bg: rgba(17, 24, 39, 0.04);
  --pb-search-bg-focus: var(--pb-surface);

  /* ── pb-section-properties overhaul (Phase 0 — visual foundation) ──
     Inspector rows + drawers + spacing-band diagram. Mirrors panel-left
     row tokens so the section view body reads as a single design system.
     Phases 3-9 consume these; tokens land in Phase 0 so dark/light/forced-
     colors theming is wired before the new components arrive. */

  /* Section properties inspector rows */
  --pb-spi-row-bg: var(--pb-row-bg);
  --pb-spi-row-bg-hover: var(--pb-row-bg-hover);
  --pb-spi-row-bg-active: var(--pb-row-bg-selected);
  --pb-spi-override-dot: var(--pb-accent);
  --pb-spi-override-dot-glow: var(--pb-accent-glow);
  --pb-spi-summary-fg: var(--pb-text-dim);

  /* Spacing-diagram bands (Phase 5) */
  --pb-spacing-band-fill: rgba(0, 120, 212, 0.14); /* fallback for engines without color-mix() */
  --pb-spacing-band-fill: color-mix(in srgb, var(--pb-accent) 14%, transparent);
  --pb-spacing-band-stroke: rgba(0, 120, 212, 0.4);
  --pb-spacing-band-stroke: color-mix(in srgb, var(--pb-accent) 40%, transparent);
  --pb-spacing-band-fill-hover: rgba(0, 120, 212, 0.22);
  --pb-spacing-band-fill-hover: color-mix(in srgb, var(--pb-accent) 22%, transparent);
  --pb-spacing-content-fill: var(--pb-surface-2);

  /* Drawer surface (Phases 3-8) — glass-style with opaque fallback */
  --pb-drawer-bg: var(--pb-panel-bg);
  --pb-drawer-shadow: var(--pb-shadow-dropdown);
}

/* Forced-colors fallbacks for the new tokens — system colors take over */
@media (forced-colors: active) {
  :root {
    --pb-panel-bg: Canvas;
    --pb-panel-divider: CanvasText;
    --pb-row-bg: Canvas;
    --pb-row-bg-hover: Canvas;
    --pb-row-bg-selected: Highlight;
    --pb-row-bg-active: Canvas;
    --pb-row-shadow: none;
    --pb-row-shadow-hover: none;
    --pb-shared-tint: Canvas;
    --pb-scope-pill-bg: Canvas;
    --pb-scope-pill-fg: CanvasText;
    --pb-search-bg: Canvas;
    --pb-search-bg-focus: Canvas;

    /* pb-section-properties — system colors */
    --pb-spi-row-bg: Canvas;
    --pb-spi-row-bg-hover: Canvas;
    --pb-spi-row-bg-active: Highlight;
    --pb-spi-override-dot: Highlight;
    --pb-spi-override-dot-glow: Highlight;
    --pb-spi-summary-fg: CanvasText;
    --pb-spacing-band-fill: ButtonFace;
    --pb-spacing-band-stroke: ButtonText;
    --pb-spacing-band-fill-hover: Highlight;
    --pb-spacing-content-fill: Canvas;
    --pb-drawer-bg: Canvas;
    --pb-drawer-shadow: none;
  }
}

/* Reduced-transparency users: drop translucency, keep readability */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --pb-panel-bg: var(--pb-surface);
    --pb-scope-pill-bg: var(--pb-surface-hover);
    --pb-search-bg: var(--pb-surface-hover);
    /* Drawer surface inherits the opaque panel background */
    --pb-drawer-bg: var(--pb-surface);
  }
}