/**
 * Don't forget to update your APPs global.css to include this file!
 */

@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

@layer base {
  :root {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --card: 0 0% 11% / 40%;
    --card-nested: 0 0% 7% / 40%;
    --card-foreground: 0 0% 12% / 40%;
    --popover: 0 0% 12% / 40%;
    --popover-foreground: 0 0% 100%;
    --primary: 116 74% 52%;
    --primary-foreground: 0 0% 0%;
    --secondary: 87 87% 50%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 100% / 25%;
    --muted-foreground: 116 74% 52% / 50%;
    --accent: 116 74% 52%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 90%;
    --border: 0 0% 100% / 15%;
    --input: 0 0% 100%;
    --ring: 0 0% 100% / 15%;
    --radius: 0.5rem;
    --g-keyboardblack-start: 0 0% 5%;
    --light-black: 0 0% 0% / 5%;
  }

  .dark {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --card: 0 0% 11% / 40%;
    --card-nested: 0 0% 7% / 40%;
    --card-foreground: 0 0% 12% / 40%;
    --popover: 0 0% 12% / 40%;
    --popover-foreground: 0 0% 100%;
    --primary: 116 74% 52%;
    --primary-foreground: 0 0% 0%;
    --secondary: 87 87% 50%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 100% / 25%;
    --muted-foreground: 116 74% 52% / 50%;
    --accent: 116 74% 52%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 90%;
    --border: 0 0% 100% / 15%;
    --input: 0 0% 100%;
    --ring: 0 0% 100% / 15%;
    --radius: 0.5rem;
    --greendiant-start: 78 100% 42%;
    --greendiant-end: 136 98% 45%;
    --g-keyboardblack-start: 0 0% 5%;
    --light-black: 0 0% 0% / 10%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings:
      'rlig' 1,
      'calt' 1;
  }
}
