@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Noto+Emoji:wght@300..700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 1) THEME TOKENS (underscored): defaults + classes control these */
@layer base {
  /* Light defaults */
  :root {
    color-scheme: light;
    --_background: 48 33% 97%;
    --_foreground: 222.2 84% 4.9%;
    --_primary: var(--_muted);
    --_primary-foreground: var(--_muted-foreground);
    --_secondary: var(--_muted);
    --_secondary-foreground: 215.4 16.3% 70.9%;
    --_muted: 0 0% 100%;
    --_muted-foreground: var(--_foreground);
    --_accent: var(--_background);
    --_accent-foreground: 222.2 84% 4.9%;
    --_destructive: 0 84.2% 60.2%;
    --_destructive-foreground: var(--_background);
    --_border: 214.3 31.8% 91.4%;
    --_input: var(--_border);
    --_ring: 222.2 84% 4.9%;
    --_radius: 0.5rem;

    /* Status (light) */
    --_success: 142.1 76.2% 36.3%;
    --_success-foreground: 138.5 76.5% 96.7%;
    --_warning: 32.2 95% 44.1%;
    --_warning-foreground: 26 83.3% 14.1%;
    --_info: 217.2 91.2% 59.8%;
    --_info-foreground: 222.2 84% 4.9%;
    --_neutral: 210 40% 96%;
    --_neutral-foreground: 222.2 84% 4.9%;

    /* Console (light) */
    --_console-background: 0 0% 100%;
    --_console-foreground: 222.2 84% 4.9%;
    --_console-success: 138 69% 45%;
    --_console-error: 5 100% 69%;
  }

  /* Dark defaults (used if no theme class but user prefers dark) */
  .dark {
    color-scheme: dark;
    --_background: 48 4% 16%;
    --_foreground: 48 7% 85%;
    --_primary: var(--_muted);
    --_primary-foreground: var(--_muted-foreground);
    --_secondary: var(--_muted);
    --_secondary-foreground: 48 2% 65%;
    --_muted: 60 2% 18%;
    --_muted-foreground: var(--_foreground);
    --_accent: var(--_background);
    --_accent-foreground: 210 40% 98%;
    --_destructive: 0 45% 55%;
    --_destructive-foreground: var(--_background-foreground);
    --_border: 60 2% 25%;
    --_input: var(--_border);
    --_ring: 212.7 26.8% 83.9%;

    /* Status (dark) */
    --_success: 138.5 76.5% 47.7%;
    --_success-foreground: 138.5 76.5% 96.7%;
    --_warning: 32.2 95% 44.1%;
    --_warning-foreground: 26 83.3% 14.1%;
    --_info: 217.2 91.2% 59.8%;
    --_info-foreground: 222.2 84% 4.9%;
    --_neutral: 217.2 32.6% 17.5%;
    --_neutral-foreground: 210 40% 98%;

    /* Console (dark) */
    --_console-background: 0 0% 0%;
    --_console-foreground: 210 40% 98%;
    --_console-success: 138.5 76.5% 47.7%;
    --_console-error: 0 84.2% 60.2%;
  }
}

/* 2) PUBLIC TOKENS: prefer VS Code, else fall back to theme tokens */
@layer base {
  :root {
    --background: var(--vscode-editor-background, var(--_background));
    --foreground: var(--vscode-editor-foreground, var(--_foreground));

    --card: var(--muted);
    --card-foreground: var(--muted-foreground);
    --popover: var(--background);
    --popover-foreground: var(--foreground);

    --primary: var(--vscode-button-background, var(--_primary));
    --primary-foreground: var(
      --vscode-editor-foreground,
      var(--_primary-foreground)
    );
    --secondary: var(--vscode-input-background, var(--_secondary));
    --secondary-foreground: var(
      --vscode-input-foreground,
      var(--_secondary-foreground)
    );

    --muted: var(--vscode-editor-background, var(--_muted));
    --muted-foreground: var(
      --vscode-descriptionForeground,
      var(--_muted-foreground)
    );
    --accent: var(--vscode-focusBorder, var(--_accent));
    --accent-foreground: var(
      --vscode-editor-foreground,
      var(--_accent-foreground)
    );

    --destructive: var(--vscode-errorForeground, var(--_destructive));
    --destructive-foreground: var(
      --vscode-button-foreground,
      var(--_destructive-foreground)
    );

    --border: var(--vscode-input-background, var(--_border));
    --input: var(--vscode-input-background, var(--_input));
    --ring: var(--vscode-focusBorder, var(--_ring));

    --radius: var(--_radius);

    /* Status */
    --success: var(--vscode-testing-iconPassed, var(--_success));
    --success-foreground: var(
      --vscode-editor-foreground,
      var(--_success-foreground)
    );
    --warning: var(--vscode-testing-iconQueued, var(--_warning));
    --warning-foreground: var(
      --vscode-descriptionForeground,
      var(--_warning-foreground)
    );
    --info: var(--vscode-focusBorder, var(--_info));
    --info-foreground: var(--vscode-editor-foreground, var(--_info-foreground));
    --neutral: var(--vscode-input-background, var(--_neutral));
    --neutral-foreground: var(
      --vscode-editor-foreground,
      var(--_neutral-foreground)
    );

    /* Console/terminal */
    --console-background: var(
      --vscode-editor-background,
      var(--_console-background)
    );
    --console-foreground: var(
      --vscode-terminal-foreground,
      var(--_console-foreground)
    );
    --console-success: var(
      --vscode-testing-iconPassed,
      var(--_console-success)
    );
    --console-error: var(--vscode-terminal-ansiRed, var(--_console-error));
  }
}

/* 3) Usage */
@layer base {
  * {
    @apply border-border;
  }

  html,
  body,
  #root {
    @apply min-h-screen;
  }

  body {
    @apply bg-background text-foreground font-chivo-mono;
  }

  *:focus {
    @apply ring-inset;
  }

  .logo {
    @apply fill-foreground;
  }
}

/* ANSI color classes for fancy-ansi */
@layer components {
  .ansi-red {
    @apply text-red-500;
  }

  .ansi-green {
    @apply text-green-500;
  }

  .ansi-yellow {
    @apply text-yellow-500;
  }

  .ansi-blue {
    @apply text-blue-500;
  }

  .ansi-magenta {
    @apply text-purple-500;
  }

  .ansi-cyan {
    @apply text-cyan-500;
  }

  .ansi-white {
    @apply text-white;
  }

  .ansi-black {
    @apply text-black;
  }

  .ansi-bright-red {
    @apply text-red-400;
  }

  .ansi-bright-green {
    @apply text-green-400;
  }

  .ansi-bright-yellow {
    @apply text-yellow-400;
  }

  .ansi-bright-blue {
    @apply text-blue-400;
  }

  .ansi-bright-magenta {
    @apply text-purple-400;
  }

  .ansi-bright-cyan {
    @apply text-cyan-400;
  }

  .ansi-bright-white {
    @apply text-gray-200;
  }

  .ansi-bright-black {
    @apply text-gray-700;
  }

  .ansi-bold {
    @apply font-bold;
  }

  .ansi-italic {
    @apply italic;
  }

  .ansi-underline {
    @apply underline;
  }
}
