/*
 * mcpctl design tokens. Dark-mode-only — this is an internal tool and
 * adding light mode doubles QA surface for no clear user benefit.
 *
 * Color philosophy: a near-black canvas with a slightly lifted surface
 * tier ("surface" / "surfaceHi") for cards. Borders are subtle (zinc-800
 * range) so spatial structure comes from spacing, not lines. Accent
 * colours are reserved for status: emerald = success/approved, red =
 * danger/rejected, amber = pending, sky = primary action.
 *
 * Typography: Inter for UI, JetBrains Mono for IDs / code / monospace
 * displays. Loaded via Google Fonts so production deploys don't need a
 * separate CDN. (Could swap to a self-hosted geist later — the fallback
 * stack reads identically.)
 *
 * NOTE: @import url(...) must come before any other rules. Tailwind's
 * own @import directive is wired up after.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import "tailwindcss";

@theme {
  --color-canvas: oklch(0.16 0.005 270);          /* near-black */
  --color-surface: oklch(0.20 0.008 270);          /* card bg */
  --color-surface-hi: oklch(0.24 0.010 270);       /* hover/lifted */
  --color-border: oklch(0.30 0.010 270);
  --color-border-strong: oklch(0.40 0.010 270);
  --color-fg: oklch(0.92 0.005 270);
  --color-fg-muted: oklch(0.65 0.010 270);
  --color-fg-subtle: oklch(0.50 0.012 270);

  --color-primary: oklch(0.74 0.16 240);           /* sky-ish */
  --color-primary-hover: oklch(0.78 0.16 240);
  --color-primary-fg: oklch(0.16 0.005 270);

  --color-success: oklch(0.72 0.18 145);           /* emerald */
  --color-success-bg: oklch(0.30 0.10 145);
  --color-warning: oklch(0.80 0.16 80);             /* amber */
  --color-warning-bg: oklch(0.30 0.10 80);
  --color-danger: oklch(0.70 0.20 25);              /* red */
  --color-danger-bg: oklch(0.30 0.12 25);

  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5);
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html, body, #root {
    height: 100%;
  }

  html {
    color-scheme: dark;
    font-family: var(--font-sans);
  }

  body {
    background: var(--color-canvas);
    color: var(--color-fg);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    margin: 0;
  }

  ::selection {
    background: var(--color-primary);
    color: var(--color-primary-fg);
  }

  /* Monaco / code-y bits inherit the mono stack. */
  code, pre, kbd {
    font-family: var(--font-mono);
  }

  /* Keep focus visible — accessibility table stakes. */
  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}
