/* ========================================
   WorldTool - Component Tokens
   Bridge between core design tokens and UI modules
   ======================================== */

:root {
  /* === SURFACE SEMANTICS === */
  --surface-default: var(--card-bg);
  --surface-muted: var(--bg-secondary);
  --surface-alt: var(--bg-tertiary);
  --surface-elevated: var(--modal-bg);
  --surface-border: var(--card-border);
  --surface-border-strong: var(--border-primary);

  /* === TEXT SEMANTICS === */
  --text-strong: var(--text-primary);
  --text-subtle: var(--text-secondary);
  --text-muted: var(--text-tertiary);
  --text-soft: color-mix(in srgb, var(--text-secondary) 70%, var(--text-muted) 30%);
  --text-on-contrast: #ffffff;
  --text-shadow-soft: 0 1px 3px rgba(15, 23, 42, 0.3);
  --text-shadow-strong: 0 1px 3px rgba(15, 23, 42, 0.55);

  /* === CONTROL SEMANTICS === */
  --control-bg: var(--input-bg);
  --control-border: var(--input-border);
  --control-hover-bg: var(--secondary-hover);
  --control-focus-border: var(--accent-fg);
  --control-focus-ring: var(--accent-bg);
  --control-placeholder: var(--text-muted);

  /* === STATUS TOKENS === */
  --status-success-border: var(--success-fg);
  --status-success-icon-bg: var(--success-bg);
  --status-success-icon-color: var(--success-hover);

  --status-danger-border: var(--danger-fg);
  --status-danger-icon-bg: var(--danger-bg);
  --status-danger-icon-color: var(--danger-hover);

  --status-warning-border: var(--attention-fg);
  --status-warning-icon-bg: var(--attention-bg);
  --status-warning-icon-color: var(--attention-hover);

  --status-info-border: var(--info-fg);
  --status-info-icon-bg: var(--info-bg);
  --status-info-icon-color: var(--info-hover);

  /* === NAVIGATION === */
  --navbar-height: 50px;
  --app-shell-offset: var(--navbar-height);
  --navbar-bg: var(--bg-primary);
  --navbar-border: var(--border-primary);
  --navbar-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  --navbar-chip-bg: var(--secondary-hover);
  --navbar-text: var(--text-primary);
  --navbar-muted: var(--text-secondary);
  --navbar-avatar-bg: linear-gradient(135deg, var(--accent-fg), var(--info-fg));
  --navbar-avatar-color: #ffffff;
  --brand-badge-bg: linear-gradient(135deg, #6d5efc, #35b4ff);
  --brand-badge-color: #ffffff;

  --sidebar-bg: var(--bg-secondary);
  --sidebar-border: var(--border-primary);
  --sidebar-active-bg: var(--accent-bg);
  --sidebar-active-text: var(--accent-fg);
  --sidebar-badge-bg: color-mix(in srgb, var(--accent-bg) 70%, var(--bg-primary) 30%);
  --sidebar-badge-color: var(--accent-fg);
  --sidebar-badge-border: color-mix(in srgb, var(--accent-bg) 50%, transparent);
  --sidebar-toggle-bg: color-mix(in srgb, var(--bg-primary) 85%, var(--accent-bg) 15%);
  --sidebar-toggle-border: color-mix(in srgb, var(--card-border) 70%, var(--accent-bg) 30%);
  --sidebar-toggle-icon: color-mix(in srgb, var(--accent-fg) 60%, var(--text-secondary) 40%);
  --sidebar-toggle-hover-bg: color-mix(in srgb, var(--accent-bg) 45%, var(--bg-primary) 55%);
  --sidebar-toggle-hover-icon: var(--accent-fg);
  --sidebar-toggle-active-bg: color-mix(in srgb, var(--accent-bg) 60%, var(--bg-primary) 40%);

  /* === PAGE LAYOUTS === */
  --page-header-bg: var(--surface-default);
  --page-header-border: var(--surface-border);
  --page-header-height: 64px;
  --page-search-height: 60px;
  --page-title-color: var(--text-strong);
  --page-subtitle-color: var(--text-muted);
  --page-search-bg: var(--surface-default);
  --page-search-border: var(--surface-border);
  --page-search-input-bg: var(--surface-alt);
  --page-search-input-border: var(--surface-border);
  --page-search-input-focus-border: var(--control-focus-border);
  --page-search-input-focus-ring: var(--control-focus-ring);
  --page-content-bg: var(--surface-muted);
  --page-empty-title: var(--text-strong);
  --page-empty-text: var(--text-subtle);
  --page-confirm-bg: var(--surface-elevated);
  --page-confirm-text: var(--text-strong);
  --page-overlay-bg: rgba(0, 0, 0, 0.5);
  --overlay-backdrop-strong: rgba(15, 23, 42, 0.75);
  --overlay-backdrop-medium: rgba(15, 23, 42, 0.5);
  --overlay-backdrop-soft: rgba(15, 23, 42, 0.3);
  --overlay-danger: rgba(239, 68, 68, 0.15);
  --overlay-accent: rgba(59, 130, 246, 0.12);
  --shadow-elevated: 0 18px 40px rgba(15, 23, 42, 0.12);
  --shadow-card: 0 6px 18px rgba(15, 23, 42, 0.08);
  --shadow-hover: 0 4px 10px rgba(15, 23, 42, 0.12);
  --shadow-pop: 0 2px 6px rgba(15, 23, 42, 0.08);
  --page-toolbar-bg: color-mix(in srgb, var(--page-header-bg) 80%, var(--accent-bg) 20%);
  --page-toolbar-border: color-mix(in srgb, var(--page-header-border) 80%, var(--accent-fg) 20%);
  --page-toolbar-title: color-mix(in srgb, var(--page-title-color) 90%, var(--accent-fg) 10%);
  --page-toolbar-subtitle: color-mix(in srgb, var(--page-subtitle-color) 85%, var(--accent-fg) 15%);
  --page-toolbar-chip-bg: color-mix(in srgb, var(--accent-bg) 55%, var(--surface-default) 45%);
  --page-toolbar-chip-border: color-mix(in srgb, var(--accent-bg) 40%, var(--surface-border) 60%);
  --page-toolbar-chip-text: color-mix(in srgb, var(--page-title-color) 80%, var(--accent-fg) 20%);

  /* === MODALS === */
  --modal-surface: var(--modal-bg);
  --modal-border: var(--border-primary);

  /* === TOASTS === */
  --toast-bg: var(--surface-default);
  --toast-border: var(--surface-border);
  --toast-shadow: var(--shadow-xl);
  --toast-title-color: var(--text-strong);
  --toast-message-color: var(--text-subtle);
  --toast-close-color: var(--text-muted);
  --toast-close-hover-bg: var(--surface-alt);
  --toast-close-hover-color: var(--text-subtle);

  --toast-history-toggle-bg: var(--surface-default);
  --toast-history-toggle-border: var(--surface-border);
  --toast-history-toggle-text: var(--text-strong);
  --toast-history-toggle-hover-bg: var(--surface-muted);
  --toast-history-toggle-hover-border: var(--border-secondary);
  --toast-history-badge-bg: var(--danger-fg);
  --toast-history-badge-text: #ffffff;
  --toast-history-badge-border: var(--surface-border);

  --toast-history-panel-bg: var(--surface-default);
  --toast-history-panel-border: var(--surface-border);
  --toast-history-panel-shadow: var(--shadow-xl);
  --toast-history-header-bg: var(--bg-secondary);
  --toast-history-header-border: var(--surface-border);
  --toast-history-header-text: var(--text-strong);
  --toast-history-btn-color: var(--text-muted);
  --toast-history-btn-hover-bg: var(--surface-alt);
  --toast-history-btn-hover-color: var(--text-strong);

  --toast-history-item-bg: var(--surface-muted);
  --toast-history-item-border: var(--surface-border);
  --toast-history-item-hover-bg: var(--surface-default);
  --toast-history-item-hover-border: var(--border-secondary);
  --toast-history-item-title: var(--text-strong);
  --toast-history-item-message: var(--text-subtle);
  --toast-history-item-time: var(--text-muted);
  --toast-history-empty-text: var(--text-muted);
}

:root[data-appearance="dark"] {
  --text-shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.6);
  --text-shadow-strong: 0 1px 3px rgba(0, 0, 0, 0.75);
  --sidebar-badge-bg: color-mix(in srgb, var(--accent-fg) 30%, var(--bg-secondary) 70%);
  --sidebar-badge-color: var(--text-on-contrast);
  --sidebar-badge-border: color-mix(in srgb, var(--sidebar-badge-bg) 60%, transparent);
  --sidebar-toggle-bg: color-mix(in srgb, var(--bg-secondary) 70%, var(--accent-bg) 30%);
  --sidebar-toggle-border: color-mix(in srgb, var(--border-primary) 55%, var(--accent-fg) 45%);
  --sidebar-toggle-icon: color-mix(in srgb, var(--accent-fg) 70%, var(--text-secondary) 30%);
  --sidebar-toggle-hover-bg: color-mix(in srgb, var(--accent-bg) 55%, var(--bg-secondary) 45%);
  --sidebar-toggle-hover-icon: var(--accent-fg);
  --sidebar-toggle-active-bg: color-mix(in srgb, var(--accent-bg) 70%, var(--bg-secondary) 30%);
  --page-toolbar-bg: color-mix(in srgb, var(--page-header-bg) 55%, var(--accent-subtle) 45%);
  --page-toolbar-border: color-mix(in srgb, var(--page-header-border) 60%, var(--accent-fg) 40%);
  --page-toolbar-title: color-mix(in srgb, var(--page-title-color) 80%, var(--text-on-contrast) 20%);
  --page-toolbar-subtitle: color-mix(in srgb, var(--page-subtitle-color) 70%, var(--text-on-contrast) 30%);
  --page-toolbar-chip-bg: color-mix(in srgb, var(--accent-subtle) 60%, var(--surface-alt) 40%);
  --page-toolbar-chip-border: color-mix(in srgb, var(--accent-subtle) 40%, var(--surface-border) 60%);
  --page-toolbar-chip-text: color-mix(in srgb, var(--text-strong) 80%, var(--text-on-contrast) 20%);
}

:root[data-theme="forest"] {
  --navbar-avatar-bg: linear-gradient(135deg, #2f855a, #0d9488);
  --page-overlay-bg: rgba(3, 24, 15, 0.65);
}

:root[data-theme="forest"][data-appearance="light"] {
  --navbar-chip-bg: rgba(47, 133, 90, 0.12);
}

:root[data-theme="forest"][data-appearance="dark"] {
  --navbar-shadow: 0 2px 12px rgba(3, 15, 9, 0.6);
  --toast-shadow: 0 20px 50px rgba(2, 10, 6, 0.7);
}