@import 'tailwindcss';

/* ── Geist font family (variable, self-hosted) ─────────────────── */

@font-face {
  font-family: 'Geist Sans';
  src: url('/fonts/GeistSans-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Tailwind v4 theme tokens ──────────────────────────────────── */

@theme {
  /* Typography */
  --font-sans: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Brand surfaces (dark-first) */
  --color-surface-0: #0d1117;
  --color-surface-1: #161b22;
  --color-surface-2: #1c2128;
  --color-surface-3: #21262d;
  --color-surface-4: #282e36;

  /* Brand accent (steel blue from logo) */
  --color-accent-50: #e8f4fa;
  --color-accent-100: #c5e3f2;
  --color-accent-200: #9dcde6;
  --color-accent-300: #7eb0ce;
  --color-accent-400: #5c95b8;
  --color-accent-500: #4a7d9e;
  --color-accent-600: #395e73;
  --color-accent-700: #2d4a5c;
  --color-accent-800: #1f3340;
  --color-accent-900: #142129;

  /* Text on dark */
  --color-text-primary: #e6edf3;
  --color-text-secondary: #7d8590;
  --color-text-tertiary: #484f58;
  --color-text-link: #7eb0ce;

  /* Borders */
  --color-border-default: rgba(255, 255, 255, 0.08);
  --color-border-muted: rgba(255, 255, 255, 0.04);
  --color-border-accent: rgba(126, 176, 206, 0.3);

  /* Status (tuned for dark surfaces) */
  --color-status-alive: #2ea043;
  --color-status-alive-bg: rgba(46, 160, 67, 0.15);
  --color-status-dead: #da3633;
  --color-status-dead-bg: rgba(218, 54, 51, 0.15);
  --color-status-active: #3fb950;
  --color-status-active-bg: rgba(63, 185, 80, 0.15);
  --color-status-completed: #58a6ff;
  --color-status-completed-bg: rgba(88, 166, 255, 0.15);
  --color-status-failed: #f85149;
  --color-status-failed-bg: rgba(248, 81, 73, 0.15);
}

@custom-variant light (&:where([data-theme="light"], [data-theme="light"] *));

/* ── Light mode overrides ─────────────────────────────────────── */

html[data-theme='light'] {
  color-scheme: light;

  /* Surfaces */
  --color-surface-0: #ffffff;
  --color-surface-1: #f6f8fa;
  --color-surface-2: #eef1f4;
  --color-surface-3: #d8dee4;
  --color-surface-4: #ced5dc;

  /* Accent (darkened for text contrast on light surfaces) */
  --color-accent-200: #245f7e;
  --color-accent-300: #1a5068;
  --color-accent-400: #2d6a89;

  /* Text */
  --color-text-primary: #1f2328;
  --color-text-secondary: #656d76;
  --color-text-tertiary: #8b949e;
  --color-text-link: #1a5068;

  /* Borders */
  --color-border-default: rgba(0, 0, 0, 0.15);
  --color-border-muted: rgba(0, 0, 0, 0.08);
  --color-border-accent: rgba(57, 94, 115, 0.35);

  /* Status (adjusted for light surfaces) */
  --color-status-alive: #1a7f37;
  --color-status-alive-bg: rgba(26, 127, 55, 0.1);
  --color-status-dead: #cf222e;
  --color-status-dead-bg: rgba(207, 34, 46, 0.1);
  --color-status-active: #1a7f37;
  --color-status-active-bg: rgba(26, 127, 55, 0.1);
  --color-status-completed: #0969da;
  --color-status-completed-bg: rgba(9, 105, 218, 0.1);
  --color-status-failed: #cf222e;
  --color-status-failed-bg: rgba(207, 34, 46, 0.1);
}

/* ── Base layer ────────────────────────────────────────────────── */

@layer base {
  html {
    color-scheme: dark;
  }

  body {
    @apply bg-surface-0 text-text-primary font-sans antialiased;
  }

  ::selection {
    @apply bg-accent-600/50 text-white;
  }
}