/*
 * Surface elevation system
 * Provides consistent background/text color pairings across the app.
 * Uses OKLCH color system from _global.css
 */
:root {
  /* Surface levels - light mode */
  --surface-0: oklch(var(--lch-uncolor-lightest)); /* Page chrome */
  --surface-1: oklch(var(--lch-canvas));           /* Main content area, cards, panels */
  --surface-2: oklch(var(--lch-ink-darker));       /* Inverse surfaces, dark dialogs */
  --surface-input: oklch(var(--lch-ink-lightest));  /* Form input backgrounds */

  /* Text colors for each surface (auto-invert via _global.css) */
  --text-on-surface-0: oklch(var(--lch-ink-darkest));
  --text-on-surface-1: oklch(var(--lch-ink-darkest));
  --text-on-surface-2: oklch(var(--lch-ink-lightest));

  /* Muted/secondary text for each surface */
  --text-muted-on-surface-0: oklch(var(--lch-ink-medium));
  --text-muted-on-surface-1: oklch(var(--lch-ink-medium));
  --text-muted-on-surface-2: oklch(var(--lch-ink-light));

  /* Borders for each surface */
  --border-on-surface-0: oklch(var(--lch-ink-light));
  --border-on-surface-1: oklch(var(--lch-ink-light));
  --border-on-surface-2: oklch(var(--lch-ink-medium));

  /* Form inputs on different surfaces */
  --input-bg-on-surface-0: var(--surface-0);
  --input-bg-on-surface-1: var(--surface-0);
  --input-bg-on-surface-2: oklch(var(--lch-ink-dark));
  --input-border-on-surface-0: oklch(var(--lch-ink-lighter));
  --input-border-on-surface-1: oklch(var(--lch-ink-light));
  --input-border-on-surface-2: oklch(var(--lch-ink-medium));

  /* Overlay backdrop */
  --overlay-backdrop: oklch(var(--lch-black) / 50%);
}

/* Dark mode surface overrides */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --surface-0: oklch(var(--lch-ink-lighter));
    --surface-1: oklch(var(--lch-canvas));
    --surface-2: oklch(var(--lch-ink-lightest));
    --surface-input: oklch(var(--lch-ink-darker));

    --input-bg-on-surface-2: oklch(var(--lch-ink-lighter));
    --input-border-on-surface-0: oklch(var(--lch-ink-medium));
    --input-border-on-surface-1: oklch(var(--lch-ink-medium));
    --input-border-on-surface-2: oklch(var(--lch-ink-light));
  }
}

html[data-theme="dark"] {
  --surface-0: oklch(var(--lch-ink-lighter));
  --surface-1: oklch(var(--lch-canvas));
  --surface-2: oklch(var(--lch-ink-lightest));
  --surface-input: oklch(var(--lch-ink-darker));

  --input-bg-on-surface-2: oklch(var(--lch-ink-lighter));
  --input-border-on-surface-0: oklch(var(--lch-ink-medium));
  --input-border-on-surface-1: oklch(var(--lch-ink-medium));
  --input-border-on-surface-2: oklch(var(--lch-ink-light));
}

@layer components {
  /* Surface utility classes */
  .surface-0 {
    background-color: var(--surface-0);
    color: var(--text-on-surface-0);
  }

  .surface-1 {
    background-color: var(--surface-1);
    color: var(--text-on-surface-1);
  }

  .surface-1--bordered {
    background-color: var(--surface-1);
    border: 1px solid var(--border-on-surface-1);
    color: var(--text-on-surface-1);
  }

  .surface-1--elevated {
    background-color: var(--surface-1);
    border: 1px solid oklch(var(--lch-black) / 10%);
    box-shadow: var(--shadow);
    color: var(--text-on-surface-1);
  }

  .surface-2 {
    background-color: var(--surface-2);
    color: var(--text-on-surface-2);
  }

  .surface-2--elevated {
    background-color: var(--surface-2);
    box-shadow: var(--shadow);
    color: var(--text-on-surface-2);
  }

  /* Text utilities for surfaces */
  .text-muted {
    color: var(--text-muted-on-surface-1);
  }

  .surface-0 .text-muted {
    color: var(--text-muted-on-surface-0);
  }

  .surface-2 .text-muted {
    color: var(--text-muted-on-surface-2);
  }
}