src/index.css

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

@layer base {
  html {
    -webkit-font-smoothing: antialiased;
  }

  body {
    @apply bg-canvas text-ink font-sans text-base;
    margin: 0;
  }

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

  :focus-visible {
    @apply outline outline-[3px] outline-offset-[3px] outline-brand-ring;
  }
}

@layer components {
  /* The form control from the prototype: one border, one radius, one focus ring. */
  .cf-control {
    @apply w-full rounded-field border border-line-field bg-white p-3 text-slate-field
           placeholder:text-slate-placeholder
           focus:border-brand-focus focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-brand-ring;
  }

  .cf-label {
    @apply mb-[7px] block text-[13px] font-semibold;
  }

  .cf-card {
    @apply rounded-card border border-line-card bg-white p-[30px] shadow-card max-[560px]:px-5 max-[560px]:py-6;
  }

  .cf-primary {
    @apply mt-3 w-full rounded-field bg-brand px-[22px] py-[14px] font-semibold text-white
           transition-colors hover:bg-brand-hover disabled:cursor-not-allowed disabled:bg-brand-disabled;
  }

  .cf-secondary {
    @apply mt-[10px] w-full rounded-field border border-line-field bg-white px-[18px] py-3 text-slate-secondary
           transition-colors hover:bg-canvas;
  }

  .cf-tag {
    @apply mb-[14px] inline-block rounded-md bg-tag-bg px-[9px] py-[5px] text-[11px] text-tag-text;
  }

  .cf-summary {
    @apply cursor-pointer text-xs text-slate-summary;
  }
}