@import "tailwindcss";

:root {
  --pms-black: #111827;
  --pms-ink: #1f2937;
  --pms-muted: #667085;
  --pms-line: #d7dde8;
  --pms-soft: #f4f7fb;
  --pms-white: #ffffff;
  --pms-yellow: #f4c430;
  --pms-yellow-soft: #fff5cc;
  --pms-blue: #2563eb;
  --pms-blue-soft: #eaf1ff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--pms-soft);
  color: var(--pms-ink);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

::selection {
  background: var(--pms-yellow);
  color: var(--pms-black);
}

@layer components {
  .input {
    height: 2.5rem;
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid var(--pms-line);
    background: var(--pms-white);
    padding: 0 0.75rem;
    color: var(--pms-black);
    outline: none;
  }

  .input:focus {
    border-color: var(--pms-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  }
}