/* Noosphere Design Tokens
 * Semantic aliases mapping to Open Props primitives.
 * All component CSS should reference --noo-* tokens, never hardcoded values.
 * See docs/STYLE_GUIDE.md for usage reference.
 */

:root {
  /* === Colors === */
  --noo-text: var(--gray-9);
  --noo-text-muted: var(--gray-6);
  --noo-text-inverse: #fff;
  --noo-surface: var(--gray-0);
  --noo-surface-raised: #fff;
  --noo-surface-sunken: var(--gray-1);
  --noo-border: var(--gray-3);
  --noo-border-muted: var(--gray-2);

  /* Brand / Accent */
  --noo-accent: var(--indigo-6);
  --noo-accent-hover: var(--indigo-7);
  --noo-accent-subtle: var(--indigo-1);
  --noo-accent-text: #fff;
  --noo-accent-secondary: var(--violet-6);

  /* Status */
  --noo-success: var(--green-6);
  --noo-success-subtle: var(--green-1);
  --noo-success-text: var(--green-9);
  --noo-warning: var(--yellow-5);
  --noo-warning-subtle: var(--yellow-1);
  --noo-warning-text: var(--yellow-9);
  --noo-danger: var(--red-6);
  --noo-danger-subtle: var(--red-1);
  --noo-danger-text: var(--red-9);
  --noo-info: var(--blue-6);
  --noo-info-subtle: var(--blue-1);
  --noo-info-text: var(--blue-9);

  /* Gradients */
  --noo-gradient-brand: linear-gradient(135deg, var(--noo-accent) 0%, var(--noo-accent-secondary) 100%);
  --noo-gradient-success: linear-gradient(135deg, var(--noo-success) 0%, var(--green-8) 100%);

  /* Dark-palette surfaces (for always-dark contexts: visualizer, sketches) */
  --noo-surface-dark: var(--gray-11);
  --noo-surface-dark-raised: var(--gray-10);
  --noo-gradient-dark: linear-gradient(135deg, var(--noo-surface-dark) 0%, var(--noo-surface-dark-raised) 100%);

  /* Text on dark (for always-dark contexts: visualizer, sketches) */
  --noo-text-on-dark: rgba(255, 255, 255, 0.95);
  --noo-text-on-dark-muted: rgba(255, 255, 255, 0.7);

  /* === Typography === */
  --noo-font-sans: 'Inter', var(--font-sans);
  --noo-font-mono: var(--font-mono);
  --noo-font-size-xs: var(--font-size-0);
  --noo-font-size-sm: var(--font-size-1);
  --noo-font-size-base: var(--font-size-2);
  --noo-font-size-lg: var(--font-size-3);
  --noo-font-size-xl: var(--font-size-4);
  --noo-font-size-2xl: var(--font-size-5);
  --noo-font-size-3xl: var(--font-size-6);
  --noo-font-weight-normal: var(--font-weight-4);
  --noo-font-weight-medium: var(--font-weight-5);
  --noo-font-weight-semibold: var(--font-weight-6);
  --noo-font-weight-bold: var(--font-weight-7);
  --noo-line-height: var(--font-lineheight-3);
  --noo-line-height-tight: var(--font-lineheight-1);

  /* === Spacing === */
  --noo-space-xs: var(--size-1);
  --noo-space-sm: var(--size-2);
  --noo-space-md: var(--size-3);
  --noo-space-lg: var(--size-5);
  --noo-space-xl: var(--size-7);
  --noo-space-2xl: var(--size-9);

  /* === Borders & Shadows === */
  --noo-radius: var(--radius-2);
  --noo-radius-lg: var(--radius-3);
  --noo-radius-round: var(--radius-round);
  --noo-shadow: var(--shadow-2);
  --noo-shadow-lg: var(--shadow-4);

  /* === Transitions === */
  --noo-ease: var(--ease-3);
  --noo-duration: 0.2s;
}

/* Dark mode: auto-detect system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --noo-text: var(--gray-2);
    --noo-text-muted: var(--gray-5);
    --noo-surface: var(--gray-10);
    --noo-surface-raised: var(--gray-9);
    --noo-surface-sunken: var(--gray-11);
    --noo-border: var(--gray-7);
    --noo-border-muted: var(--gray-8);

    --noo-accent: var(--indigo-4);
    --noo-accent-hover: var(--indigo-3);
    --noo-accent-subtle: var(--indigo-9);
    --noo-accent-secondary: var(--violet-4);

    --noo-success-subtle: var(--green-9);
    --noo-success-text: var(--green-2);
    --noo-warning-subtle: var(--yellow-9);
    --noo-warning-text: var(--yellow-2);
    --noo-danger-subtle: var(--red-9);
    --noo-danger-text: var(--red-2);
    --noo-info-subtle: var(--blue-9);
    --noo-info-text: var(--blue-2);
  }
}

/* Dark mode: manual override via data-theme attribute */
[data-theme="dark"] {
  --noo-text: var(--gray-2);
  --noo-text-muted: var(--gray-5);
  --noo-surface: var(--gray-10);
  --noo-surface-raised: var(--gray-9);
  --noo-surface-sunken: var(--gray-11);
  --noo-border: var(--gray-7);
  --noo-border-muted: var(--gray-8);

  --noo-accent: var(--indigo-4);
  --noo-accent-hover: var(--indigo-3);
  --noo-accent-subtle: var(--indigo-9);
  --noo-accent-secondary: var(--violet-4);

  --noo-success-subtle: var(--green-9);
  --noo-success-text: var(--green-2);
  --noo-warning-subtle: var(--yellow-9);
  --noo-warning-text: var(--yellow-2);
  --noo-danger-subtle: var(--red-9);
  --noo-danger-text: var(--red-2);
  --noo-info-subtle: var(--blue-9);
  --noo-info-text: var(--blue-2);
}