/*
 * Design Principle — Color Usage
 * Avoid large-area transparent color fills (e.g. rgba(blue, 0.12) card backgrounds).
 * Prefer: neutral surface (--surface-1/2) for card bg + small high-saturation tag/badge for type signal.
 * Transparent color fills are only acceptable for tight accent regions (tag, badge, icon bg)
 * or when explicitly requested by the designer.
 */

:root {
  /* Toolbar */
  --comp-toolbar-height: 44px;
  --comp-toolbar-bg: color-mix(in srgb, var(--background) 92%, black);
  --comp-toolbar-border: var(--border-subtle);

  /* Button */
  --button-height-sm: 30px;
  --button-height-md: 36px;
  --button-height-lg: 42px;
  --button-radius: var(--radius-lg);
  --button-padding-x-sm: var(--space-2);
  --button-padding-x-md: var(--space-3);
  --button-padding-x-lg: var(--space-4);
  --button-gap: 6px;
  --button-font: 500 var(--font-size-body-sm) / 1 var(--font-sans);
  --button-solid-bg:       var(--foreground);
  --button-solid-bg-hover: color-mix(in srgb, var(--foreground) 88%, transparent);
  --button-solid-bg-press: color-mix(in srgb, var(--foreground) 80%, transparent);
  --button-solid-fg:       var(--background);
  --button-solid-shadow:   none;
  --button-secondary-bg: color-mix(in srgb, var(--surface-2) 92%, white 3%);
  --button-secondary-bg-hover: var(--surface-3);
  --button-secondary-bg-press: color-mix(in srgb, var(--surface-3) 84%, black);
  --button-secondary-border: var(--border-subtle);
  --button-secondary-fg: var(--foreground);
  --button-secondary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 2px 8px rgba(0, 0, 0, 0.16);
  --button-ghost-bg-hover: var(--state-hover);
  --button-ghost-bg-press: var(--state-press);
  --button-ghost-fg: var(--foreground-secondary);
  --button-ghost-fg-hover: var(--foreground);
  --button-focus-ring: var(--focus-ring);
  --button-disabled-opacity: 0.42;

  /* Input */
  --input-height-md: 34px;
  --input-radius: var(--radius-md);
  --input-border: var(--border-default);
  --input-bg: var(--surface-1);

  /* Panel */
  --panel-radius: var(--radius-lg);
  --panel-padding: var(--space-4);
  --panel-padding-lg: var(--space-5);
  --panel-bg: var(--surface-2);
  --panel-border: var(--border-subtle);

  /* Card */
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-4);
  --card-bg: var(--surface-1);
  --card-border: var(--border-default);
  --card-shadow: none;
  --card-hover-border: var(--border-strong);
  --card-hover-bg: var(--state-hover);          /* overlay on --card-bg, ArkUI-style */
  --card-selected-border: var(--primary);
  --card-selected-bg: var(--state-selected);    /* overlay on --card-bg */

  /* Table */
  --table-row-height: 36px;
  --table-header-height: 36px;
  --table-border: var(--border-subtle);

  /* Typography Composites — role-based readable defaults */
  --type-display:  var(--font-weight-bold) var(--font-size-display-lg) / var(--line-height-display) var(--font-sans);
  --type-title-1:  var(--font-weight-semibold) var(--font-size-title-md) / var(--line-height-title) var(--font-sans);
  --type-title-2:  var(--font-weight-semibold) var(--font-size-title-sm) / var(--line-height-title) var(--font-sans);
  --type-title-3:  var(--font-weight-semibold) var(--font-size-body-md) / var(--line-height-title) var(--font-sans);
  --type-body:     400 var(--font-size-body-md) / var(--line-height-body) var(--font-sans);
  --type-body-sm:  400 var(--font-size-body-sm) / var(--line-height-body) var(--font-sans);
  --type-label:    var(--font-weight-medium) var(--font-size-label-sm) / var(--line-height-label) var(--font-sans);
  --type-micro:    var(--font-weight-medium) var(--font-size-label-xs) / var(--line-height-label) var(--font-sans);
  --type-mono:     var(--font-weight-medium) var(--font-size-body-sm) / var(--line-height-mono) var(--font-mono);

  /* Deprecated typography aliases. Keep for downstream compatibility. */
  --text-display: var(--type-display);
  --text-title-1: var(--type-title-1);
  --text-title-2: var(--type-title-2);
  --text-title-3: var(--type-title-3);
  --text-body: var(--type-body);
  --text-body-sm: var(--type-body-sm);
  --text-label: var(--type-label);
  --text-mono: var(--type-mono);

  /* Badge / Tag */
  --tag-radius: var(--radius-pill);
  --tag-padding-x: var(--space-2);
  --tag-height: 20px;
  --comp-tag-bg: var(--state-muted);
  --comp-tag-border: var(--border-default);
  --comp-tag-fg: var(--foreground-muted);

  /* Stat Chip */
  --stat-chip-height: 22px;
  --stat-chip-padding-x: 8px;
  --stat-chip-radius: var(--radius-pill);
  --stat-chip-bg: var(--surface-2);
  --stat-chip-border: var(--border-subtle);
  --stat-chip-fg: color-mix(in srgb, var(--foreground) 88%, var(--background));

  /* Zoom Control Group */
  --zoom-control-gap: 8px;
  --zoom-control-readout-fg: color-mix(in srgb, var(--foreground) 84%, var(--background));

  /* Compact Button */
  --button-height-compact: 34px;
  --button-padding-x-compact: 12px;

  /* Segmented Control */
  --segmented-control-gap: 3px;
  --segmented-control-padding: 3px;
  --segmented-control-radius: 10px;
  --segmented-control-bg: var(--surface-disabled);
  --segmented-control-border: var(--border-subtle);

  /* Shared Panel Shell */
  --panel-shell-radius: 14px;
  --panel-shell-bg: var(--background-elevated);
  --panel-shell-border: var(--border-subtle);
  --panel-shell-shadow: var(--shadow-lg);
  --panel-shell-backdrop-filter: var(--surface-backdrop-filter-soft);
  --panel-shell-quiet-bg: var(--surface-2);
  --panel-shell-quiet-border: transparent;
  --panel-shell-quiet-shadow: none;
  --panel-shell-header-padding: 12px 14px;
  --panel-shell-body-padding: 10px 16px 18px;

  /* Three-pane Workbench */
  --workbench-frame-padding: var(--space-4);
  --workbench-frame-gap: var(--space-4);
  --workbench-frame-bg: var(--background-elevated);
  --workbench-pane-bg: var(--surface-2);
  --workbench-pane-border: var(--border-subtle);
  --workbench-pane-radius: var(--radius-xl);
  --workbench-pane-body-bg: color-mix(in srgb, var(--surface-1) 72%, transparent);

  /* IDE Frame */
  --ide-frame-page-bg: var(--surface-3);
  --ide-frame-bg: var(--surface-2);
  --ide-frame-chrome-bg: transparent;
  --ide-frame-pane-bg: var(--background);
  --ide-frame-pane-border: var(--border-subtle);
  --ide-frame-control-bg: color-mix(in srgb, var(--ide-frame-page-bg) 28%, transparent);
  --ide-frame-control-border: transparent;
  --ide-frame-control-shadow: none;
  --ide-frame-selected-bg: color-mix(in srgb, var(--foreground) 8%, transparent);
  --ide-frame-selected-border: transparent;
  --ide-frame-selected-shadow: none;
  --ide-frame-header-height: 32px;
  --ide-frame-title-font: 600 12.5px / 1.2 var(--font-sans);
  --ide-frame-meta-font: 500 var(--font-size-body-sm) / 1.35 var(--font-mono);

  /* Floating Playback */
  --floating-playback-bg: color-mix(in srgb, var(--background) 96%, black);
  --floating-playback-border: var(--border-default);
  --floating-playback-radius: 18px;
  --floating-playback-padding-y: 14px;
  --floating-playback-padding-x: 20px;
  --floating-playback-shadow: 0 16px 48px rgba(0, 0, 0, 0.60), 0 4px 16px rgba(0, 0, 0, 0.40);
  --floating-playback-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.50);
  --floating-playback-expanded-width: 1180px;
  --floating-playback-expanded-min-height: 60px;
  --floating-playback-collapsed-size: 44px;
  --floating-playback-collapsed-radius: var(--radius-lg);
  --floating-playback-collapsed-bg: var(--primary);
  --floating-playback-collapsed-border: var(--primary);
  --floating-playback-collapsed-fg: var(--primary-foreground);
  --floating-playback-collapsed-shadow: 0 10px 24px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --floating-playback-toggle-fg: var(--foreground-secondary);
  --floating-playback-strong-fg: color-mix(in srgb, var(--foreground) 82%, var(--background));
  --floating-playback-separator: var(--border-default);
  --floating-playback-scrubber-track: var(--border-strong);
  --floating-playback-scrubber-thumb-border: color-mix(in srgb, var(--primary) 80%, transparent);
  --floating-playback-scrubber-thumb-shadow: 0 0 8px color-mix(in srgb, var(--primary) 55%, transparent);
  --floating-playback-hover-bg: color-mix(in srgb, var(--background-elevated) 96%, black);
  --floating-playback-hover-border: var(--border-default);
  --floating-playback-button-height: 32px;
  --floating-playback-button-radius: var(--radius-md);
  --floating-playback-button-bg: var(--surface-disabled);
  --floating-playback-button-border: var(--border-subtle);
  --floating-playback-button-hover-bg: var(--state-hover);
  --floating-playback-button-hover-border: var(--border-default);
  --floating-playback-primary-bg: var(--primary);
  --floating-playback-primary-bg-hover: var(--primary-hover);
  --floating-playback-primary-border: var(--primary);
  --floating-playback-primary-fg: var(--primary-foreground);

  /* Inspector Rail */
  --inspector-rail-padding-x: var(--space-3);
  --inspector-rail-padding-bottom: var(--space-3);
  --inspector-section-padding-y: var(--space-4);
  --inspector-section-gap: var(--space-3);
  --inspector-section-divider: var(--border-subtle);
  --inspector-soft-card-bg: color-mix(in srgb, var(--surface-2) 80%, transparent);
  --inspector-soft-card-bg-hover: color-mix(in srgb, var(--surface-3) 62%, transparent);
  --inspector-soft-card-radius: var(--radius-md);
  --inspector-soft-card-padding: var(--space-3);
  --inspector-soft-card-gap: var(--space-2);
}

:root[data-theme='light'] {
  --button-secondary-bg: color-mix(in srgb, var(--surface-1) 92%, var(--surface-2));
  --button-secondary-bg-hover: color-mix(in srgb, var(--surface-1) 28%, var(--surface-2));
  --button-secondary-bg-press: color-mix(in srgb, var(--surface-2) 84%, var(--surface-3));
  --button-secondary-border: var(--border-default);
  --button-secondary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 1px 2px rgba(0, 0, 0, 0.06);
  --ide-frame-page-bg: var(--background-elevated);
  --ide-frame-bg: var(--background);
  --ide-frame-pane-bg: var(--surface-2);
  --floating-playback-bg: color-mix(in srgb, var(--background-elevated) 92%, white);
  --floating-playback-shadow: 0 16px 42px rgba(0, 0, 0, 0.16), 0 4px 14px rgba(0, 0, 0, 0.08);
  --floating-playback-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.86), inset 0 -1px 0 rgba(0, 0, 0, 0.04);
  --floating-playback-collapsed-shadow: 0 10px 22px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.30);
  --floating-playback-hover-bg: var(--background-elevated);
}

:root[data-theme='glass'] {
  --comp-toolbar-bg: var(--glass-surface-bg-strong);
  --comp-toolbar-border: var(--glass-surface-border);

  --button-solid-bg: rgba(255, 255, 255, 0.88);
  --button-solid-bg-hover: rgba(255, 255, 255, 0.96);
  --button-solid-bg-press: rgba(255, 255, 255, 0.78);
  --button-solid-fg: #08111f;
  --button-solid-shadow: var(--glass-surface-highlight), 0 8px 20px rgba(0, 0, 0, 0.18);
  --button-secondary-bg: rgba(255, 255, 255, 0.105);
  --button-secondary-bg-hover: rgba(255, 255, 255, 0.16);
  --button-secondary-bg-press: rgba(255, 255, 255, 0.08);
  --button-secondary-border: rgba(255, 255, 255, 0.12);
  --button-secondary-shadow: var(--glass-surface-highlight), 0 8px 24px rgba(0, 0, 0, 0.14);
  --button-ghost-bg-hover: rgba(255, 255, 255, 0.10);
  --button-ghost-bg-press: rgba(255, 255, 255, 0.15);

  --input-bg: rgba(255, 255, 255, 0.08);
  --input-border: rgba(255, 255, 255, 0.12);

  --panel-bg: color-mix(in srgb, var(--background-elevated) 88%, black 12%);
  --panel-border: var(--border-subtle);
  --card-bg: color-mix(in srgb, var(--background-elevated) 84%, black 16%);
  --card-border: var(--border-subtle);
  --card-shadow: none;
  --card-hover-border: var(--border-strong);
  --card-hover-bg: rgba(255, 255, 255, 0.08);
  --card-selected-bg: rgba(111, 161, 255, 0.18);

  --comp-tag-bg: rgba(255, 255, 255, 0.075);
  --comp-tag-border: rgba(255, 255, 255, 0.16);
  --comp-tag-fg: var(--foreground-secondary);

  --stat-chip-bg: rgba(255, 255, 255, 0.09);
  --stat-chip-border: rgba(255, 255, 255, 0.14);
  --segmented-control-bg: rgba(255, 255, 255, 0.065);
  --segmented-control-border: rgba(255, 255, 255, 0.14);

  --panel-shell-bg: var(--glass-surface-bg);
  --panel-shell-border: var(--glass-surface-border);
  --panel-shell-shadow: var(--glass-surface-highlight), var(--glass-surface-shadow);
  --panel-shell-backdrop-filter: var(--surface-backdrop-filter);
  --panel-shell-quiet-bg: var(--glass-surface-bg-soft);
  --panel-shell-quiet-border: rgba(255, 255, 255, 0.12);
  --panel-shell-quiet-shadow: var(--glass-surface-highlight);

  --workbench-frame-bg: color-mix(in srgb, var(--background-elevated) 88%, black 12%);
  --workbench-pane-bg: color-mix(in srgb, var(--background) 92%, var(--surface-2));
  --workbench-pane-border: rgba(255, 255, 255, 0.09);
  --workbench-pane-body-bg: rgba(8, 10, 15, 0.78);

  --ide-frame-page-bg: var(--app-background);
  --ide-frame-bg: #0b1018;
  --ide-frame-chrome-bg: transparent;
  --ide-frame-pane-bg: #080c12;
  --ide-frame-pane-border: rgba(255, 255, 255, 0.08);
  --ide-frame-control-bg: var(--glass-surface-bg-soft);
  --ide-frame-control-border: rgba(255, 255, 255, 0.12);
  --ide-frame-control-shadow: var(--glass-surface-highlight);
  --ide-frame-selected-bg: var(--glass-surface-bg);
  --ide-frame-selected-border: rgba(255, 255, 255, 0.16);
  --ide-frame-selected-shadow: var(--glass-surface-highlight), 0 8px 24px rgba(0, 0, 0, 0.14);

  --floating-playback-bg: var(--glass-surface-bg-strong);
  --floating-playback-border: var(--glass-surface-border);
  --floating-playback-shadow: var(--glass-surface-shadow);
  --floating-playback-inner-highlight: var(--glass-surface-highlight);
  --floating-playback-collapsed-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  --floating-playback-hover-bg: var(--glass-surface-bg);
  --floating-playback-hover-border: rgba(255, 255, 255, 0.16);
  --floating-playback-button-bg: rgba(255, 255, 255, 0.09);
  --floating-playback-button-border: rgba(255, 255, 255, 0.12);
  --floating-playback-button-hover-bg: rgba(255, 255, 255, 0.14);
  --floating-playback-button-hover-border: rgba(255, 255, 255, 0.16);

  --inspector-soft-card-bg: rgba(255, 255, 255, 0.075);
  --inspector-soft-card-bg-hover: rgba(255, 255, 255, 0.115);
}