/* AI Design Space — shared component readability tokens.
   This layer translates canonical semantic tokens into reusable contracts for
   dense UI surfaces. Component adapters must consume these variables instead
   of introducing route-specific light/dark color literals. */
html:root {
  /* Account / settings */
  --aidc-account-info-surface: var(--aidc-bg-card);
  --aidc-account-info-surface-muted: var(--aidc-bg-elevated);
  --aidc-account-info-border: var(--aidc-border-default);
  --aidc-account-info-title: var(--aidc-text-primary);
  --aidc-account-info-body: var(--aidc-text-secondary);
  --aidc-account-info-meta: var(--aidc-text-muted);
  --aidc-account-action-bg: var(--aidc-btn-secondary-bg);
  --aidc-account-action-bg-hover: var(--aidc-btn-secondary-bg-hover);
  --aidc-account-action-border: var(--aidc-border-default);
  --aidc-account-action-text: var(--aidc-text-secondary);
  --aidc-account-action-text-hover: var(--aidc-text-primary);
  --aidc-account-action-gap: 8px;

  /* Dense editor controls — shared by Mask / Photo / Upscale. */
  --aidc-editor-control-bg: var(--aidc-workspace-control-bg);
  --aidc-editor-control-bg-hover: var(--aidc-workspace-control-hover);
  --aidc-editor-control-border: var(--aidc-border-default);
  --aidc-editor-control-border-strong: var(--aidc-border-strong);
  --aidc-editor-control-text: var(--aidc-text-primary);
  --aidc-editor-control-secondary: var(--aidc-text-secondary);
  --aidc-editor-control-muted: var(--aidc-text-muted);
  --aidc-editor-control-active-bg: var(--aidc-workspace-selection-bg);
  --aidc-editor-control-active-border: var(--aidc-workspace-selection-border);
  --aidc-editor-control-active-text: var(--aidc-interactive-accent-text);
  --aidc-editor-accent: var(--aidc-interactive-accent);
  --aidc-editor-accent-hover: var(--aidc-interactive-accent-text);
  --aidc-editor-danger: var(--aidc-red-500);
  --aidc-editor-overlay-bg: var(--aidc-bg-popover);
  --aidc-editor-overlay-border: var(--aidc-border-default);
  --aidc-editor-overlay-text: var(--aidc-text-primary);
  --aidc-editor-ruler-bg: var(--aidc-editor-toolbar-surface);
  --aidc-editor-ruler-border: var(--aidc-editor-control-border);
  --aidc-editor-ruler-tick: var(--aidc-editor-control-secondary);
  --aidc-editor-ruler-text: var(--aidc-editor-control-text);
  --aidc-editor-ruler-marker: var(--aidc-editor-accent);
  --aidc-editor-layer-footer-bg: var(--aidc-editor-panel-surface);
  --aidc-editor-layer-footer-border: var(--aidc-editor-control-border);

  /* Upscale stage controls — geometry lives in one semantic component contract. */
  --aidc-upscale-stage-control-inset: 12px;
  --aidc-upscale-stage-control-bottom: 52px;
  --aidc-upscale-replace-row-gap: 8px;

  /* Generator empty-folder guide — instructional copy is primary content. */
  --aidc-generator-guide-title: var(--aidc-text-primary);
  --aidc-generator-guide-body: var(--aidc-text-primary);
  --aidc-generator-guide-emphasis: var(--aidc-text-primary);
  --aidc-generator-guide-accent: var(--aidc-interactive-accent-text);
  --aidc-generator-guide-info: var(--aidc-cyan-500);
  --aidc-generator-guide-warning: var(--aidc-status-warning);
  --aidc-generator-guide-danger: var(--aidc-red-500);
  --aidc-generator-guide-surface: transparent;

  /* Project creation — one contract for desktop tree and TG/PWA modal. */
  --aidc-project-create-backdrop: var(--aidc-backdrop);
  --aidc-project-create-surface: var(--aidc-bg-modal);
  --aidc-project-create-border: var(--aidc-border-default);
  --aidc-project-create-title: var(--aidc-text-primary);
  --aidc-project-create-label: var(--aidc-text-secondary);
  --aidc-project-create-field-bg: var(--aidc-dialog-input-bg);
  --aidc-project-create-field-border: var(--aidc-dialog-input-border);
  --aidc-project-create-field-text: var(--aidc-text-primary);
  --aidc-project-create-option-bg: var(--aidc-btn-secondary-bg);
  --aidc-project-create-option-hover: var(--aidc-btn-secondary-bg-hover);
  --aidc-project-create-option-border: var(--aidc-border-default);
  --aidc-project-create-option-text: var(--aidc-text-secondary);
  --aidc-project-create-option-active-bg: var(--aidc-workspace-selection-bg);
  --aidc-project-create-option-active-border: var(--aidc-workspace-selection-border);
  --aidc-project-create-option-active-text: var(--aidc-interactive-accent-text);
  --aidc-project-create-icon: var(--aidc-text-secondary);
  --aidc-project-create-icon-active: var(--aidc-interactive-accent-text);
  --aidc-project-folder-tree-bg: var(--aidc-bg-popover);
  --aidc-project-folder-tree-border: var(--aidc-border-default);
  --aidc-project-folder-tree-line: var(--aidc-border-default);
  --aidc-project-folder-tree-text: var(--aidc-text-primary);
  --aidc-project-folder-tree-meta: var(--aidc-text-secondary);
  --aidc-project-folder-tree-hover: var(--aidc-btn-secondary-bg-hover);
  --aidc-project-folder-tree-active: var(--aidc-workspace-selection-bg);

  /* Project timeline */
  --aidc-timeline-prompt-surface: var(--aidc-bg-card);
  --aidc-timeline-prompt-border: var(--aidc-border-default);
  --aidc-timeline-prompt-text: var(--aidc-text-secondary);
  --aidc-timeline-meta-text: var(--aidc-text-muted);
  --aidc-timeline-type-surface: var(--aidc-btn-secondary-bg);
  --aidc-timeline-type-border: var(--aidc-border-default);
  --aidc-timeline-type-text: var(--aidc-text-primary);
  --aidc-timeline-type-image-bg: color-mix(in srgb,var(--aidc-pink-500) 16%,var(--aidc-bg-card));
  --aidc-timeline-type-image-border: color-mix(in srgb,var(--aidc-pink-500) 52%,var(--aidc-border-default));
  --aidc-timeline-type-image-text: var(--aidc-pink-500);
  --aidc-timeline-type-video-bg: color-mix(in srgb,var(--aidc-cyan-500) 14%,var(--aidc-bg-card));
  --aidc-timeline-type-video-border: color-mix(in srgb,var(--aidc-cyan-500) 48%,var(--aidc-border-default));
  --aidc-timeline-type-video-text: var(--aidc-cyan-500);
  --aidc-timeline-type-audio-bg: color-mix(in srgb,var(--aidc-amber-500) 15%,var(--aidc-bg-card));
  --aidc-timeline-type-audio-border: color-mix(in srgb,var(--aidc-amber-500) 48%,var(--aidc-border-default));
  --aidc-timeline-type-audio-text: var(--aidc-amber-500);
  --aidc-timeline-type-text-bg: color-mix(in srgb,var(--aidc-violet-500) 15%,var(--aidc-bg-card));
  --aidc-timeline-type-text-border: color-mix(in srgb,var(--aidc-violet-500) 48%,var(--aidc-border-default));
  --aidc-timeline-type-text-text: var(--aidc-violet-500);
  --aidc-timeline-type-3d-bg: color-mix(in srgb,var(--aidc-green-500) 14%,var(--aidc-bg-card));
  --aidc-timeline-type-3d-border: color-mix(in srgb,var(--aidc-green-500) 46%,var(--aidc-border-default));
  --aidc-timeline-type-3d-text: var(--aidc-green-500);

  /* Lightbox */
  --aidc-lightbox-action-bg: var(--aidc-btn-secondary-bg);
  --aidc-lightbox-action-bg-hover: var(--aidc-btn-secondary-bg-hover);
  --aidc-lightbox-action-border: var(--aidc-border-default);
  --aidc-lightbox-action-text: var(--aidc-text-secondary);
  --aidc-lightbox-action-text-hover: var(--aidc-text-primary);
  --aidc-lightbox-action-active-bg: var(--aidc-workspace-selection-bg);
  --aidc-lightbox-action-active-border: var(--aidc-workspace-selection-border);
  --aidc-lightbox-action-active-text: var(--aidc-interactive-accent-text);
  --aidc-lightbox-comment-title: var(--aidc-text-primary);
  --aidc-lightbox-comment-body: var(--aidc-text-secondary);
  --aidc-lightbox-comment-muted: var(--aidc-text-muted);
  --aidc-lightbox-zoom-bg: var(--aidc-bg-popover);
  --aidc-lightbox-zoom-border: var(--aidc-border-default);
  --aidc-lightbox-zoom-text: var(--aidc-text-primary);
  --aidc-lightbox-zoom-control-bg: var(--aidc-lightbox-zoom-bg);
  --aidc-lightbox-zoom-control-border: var(--aidc-border-strong);
  --aidc-lightbox-zoom-control-text: var(--aidc-lightbox-zoom-text);

  /* Embedded Social Studio / Autoposting */
  --aidc-social-canvas: var(--aidc-bg-page);
  --aidc-social-panel: var(--aidc-bg-panel);
  --aidc-social-card: var(--aidc-bg-card);
  --aidc-social-elevated: var(--aidc-bg-elevated);
  --aidc-social-border: var(--aidc-border-default);
  --aidc-social-border-strong: var(--aidc-border-strong);
  --aidc-social-text-primary: var(--aidc-text-primary);
  --aidc-social-text-secondary: var(--aidc-text-secondary);
  --aidc-social-text-muted: var(--aidc-text-muted);
  --aidc-social-accent: var(--aidc-interactive-accent);
  --aidc-social-title-size: 15px;
  --aidc-social-body-size: 12.5px;
  --aidc-social-meta-size: 11px;
  --aidc-social-status-size: 11px;
  --aidc-social-status-success-bg: var(--aidc-status-success-bg);
  --aidc-social-status-success-border: var(--aidc-status-success-border);
  --aidc-social-status-success-text: var(--aidc-green-500);
  --aidc-social-status-warning-bg: var(--aidc-status-warning-bg);
  --aidc-social-status-warning-border: var(--aidc-status-warning-border);
  --aidc-social-status-warning-text: var(--aidc-status-warning-text);
  --aidc-social-status-info-bg: color-mix(in srgb,var(--aidc-cyan-500) 10%,var(--aidc-bg-card));
  --aidc-social-status-info-border: color-mix(in srgb,var(--aidc-cyan-500) 34%,var(--aidc-border-default));
  --aidc-social-status-info-text: var(--aidc-cyan-500);
}

/* Light mode needs deliberately stronger text than the generic muted tier on
   high-density/4K layouts. Keep that decision centralized here. */
html:root[data-aidc-color-mode="light"] {
  --aidc-account-info-body: var(--aidc-text-secondary);
  --aidc-account-info-meta: var(--aidc-text-secondary);
  --aidc-editor-control-secondary: var(--aidc-text-secondary);
  --aidc-editor-control-muted: var(--aidc-text-secondary);
  --aidc-editor-overlay-bg: var(--aidc-bg-popover);
  --aidc-editor-ruler-bg: var(--aidc-editor-toolbar-surface);
  --aidc-editor-ruler-tick: var(--aidc-text-secondary);
  --aidc-editor-ruler-text: var(--aidc-text-primary);
  --aidc-editor-layer-footer-bg: var(--aidc-editor-panel-surface);
  --aidc-generator-guide-title: var(--aidc-text-primary);
  --aidc-generator-guide-body: var(--aidc-text-primary);
  --aidc-generator-guide-emphasis: var(--aidc-text-primary);
  --aidc-project-create-label: var(--aidc-text-secondary);
  --aidc-project-create-option-text: var(--aidc-text-primary);
  --aidc-project-folder-tree-text: var(--aidc-text-primary);
  --aidc-project-folder-tree-meta: var(--aidc-text-secondary);
  --aidc-timeline-prompt-text: var(--aidc-text-primary);
  --aidc-timeline-meta-text: var(--aidc-text-secondary);
  --aidc-lightbox-action-text: var(--aidc-text-primary);
  --aidc-lightbox-comment-body: var(--aidc-text-secondary);
  --aidc-lightbox-comment-muted: var(--aidc-text-secondary);
  --aidc-lightbox-zoom-control-bg: var(--aidc-bg-popover);
  --aidc-lightbox-zoom-control-text: var(--aidc-text-primary);
  --aidc-social-text-secondary: var(--aidc-text-secondary);
  --aidc-social-text-muted: var(--aidc-text-secondary);
}

@media (min-width: 1400px) {
  html:root {
    --aidc-social-title-size: 16px;
    --aidc-social-body-size: 13.5px;
    --aidc-social-meta-size: 12px;
    --aidc-social-status-size: 12px;
  }
}