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

@view-transition {
  navigation: auto;
}

html {
  @apply h-full overflow-hidden;
}

body {
  @apply h-full overflow-y-auto bg-accent-primary;
}

@layer base {
  :root[class~="light-mode"] {
    --background: 255 255 255;
    --border: 13 41 25;
    --surface-white: 255 255 255;
    --text-primary: 0 0 0;
    --surface-card: 249 249 249;
    --border-default: 222 222 222;
    --text-secondary: 96 96 96;
    --text-placeholder: 178 178 178;
    --accent-primary: 85 243 154;
    --accent-primary-hover: 74 227 138;
    --accent-primary-dark: 0 173 64;
    --accent-primary-light: 148 255 187;
    --surface-blue: 171 217 254;
    --text-blue: 0 123 223;
  }
  :root[class~="dark-mode"] {
    --background: 13 41 25;
    --border: 255 255 255;
    --surface-white: 17 17 17;
    --text-primary: 255 255 255;
    --surface-card: 26 26 26;
    --border-default: 77 77 77;
    --text-secondary: 156 163 175;
    --text-placeholder: 99 99 99;
    --accent-primary: 85 243 154;
    --accent-primary-hover: 74 227 138;
    --accent-primary-dark: 85 243 154;
    --accent-primary-light: 0 121 53;
    --surface-blue: 30 58 96;
    --text-blue: 75 158 255;
  }

  #app-base {
    * {
      font-family: "Unbounded", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    p,
    b,
    a,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    input,
    textarea,
    td,
    label,
    select {
      color: rgb(var(--text-primary));
    }

    th {
      color: rgb(var(--text-secondary));
    }

    b {
      @apply font-medium;
    }

    p {
      @apply font-normal;
    }
  }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}
