@import "tailwindcss";

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fraunces-subset-34c50e32.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@theme {
  --color-brand:  #14532D;
  --color-accent: #C2410C;
  --color-page:   #FDFCFA;
  --color-ink:    #1A1A1A;

  --font-brand: "Fraunces", Georgia, "Times New Roman", serif;
}

/* The cart's free-delivery bar: a native <progress> needs no inline style to
   set its fill, so it can't be silently dropped by the style-src CSP. */
.cart-progress {
  appearance: none;
  width: 100%;
  height: 0.375rem;
  border: none;
  border-radius: 9999px;
  background-color: var(--color-stone-200);
}

.cart-progress::-webkit-progress-bar {
  background-color: var(--color-stone-200);
  border-radius: 9999px;
}

.cart-progress::-webkit-progress-value {
  background-color: var(--color-brand);
  border-radius: 9999px;
}

.cart-progress::-moz-progress-bar {
  background-color: var(--color-brand);
  border-radius: 9999px;
}

/* Preflight resets form controls to no border, no background, no radius and no
   padding, so a field styled only with a border *colour* is invisible. Every
   field in this app was. Element selectors rather than a class so the next one
   added cannot miss it. */
@layer base {
  input:where(:not([type="submit"], [type="button"], [type="checkbox"], [type="radio"], [type="file"], [type="hidden"])),
  select,
  textarea {
    border: 1px solid var(--color-stone-300);
    border-radius: 0.25rem;
    background-color: #fff;
    padding: 0.5rem 0.75rem;
  }

  /* Not nested under the rule above: Lightning CSS de-sugars `&` against a
     comma-separated list into `…,textarea):focus-visible`, whose stray paren
     invalidates the whole rule and silently drops the ring. */
  /* Rails wraps a field and its label in this when the record has an error on
     it, so the field is marked and not only described. */
  .field_with_errors input,
  .field_with_errors select,
  .field_with_errors textarea {
    border-color: var(--color-red-600);
  }

  .field_with_errors label {
    color: var(--color-red-700);
  }

  input:where(:not([type="submit"], [type="button"], [type="checkbox"], [type="radio"], [type="file"], [type="hidden"])):focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 1px;
  }
}

/* Legal pages carry real prose — numbered clauses, definition lists, a form
   template — and are the only place in the app with document structure. One
   block here rather than utility classes on ~150 elements across eight
   partials, which would drift between the two languages. */
.legal {
  line-height: 1.65;
  color: var(--color-stone-700);
}

.legal h2 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-ink);
}

.legal h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--color-ink);
}

.legal p,
.legal ol,
.legal ul {
  margin-top: 0.75rem;
}

.legal ol,
.legal ul {
  padding-left: 1.25rem;
}

.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-top: 0.375rem; }

.legal address { font-style: normal; }

.legal-facts { margin-top: 1rem; }

.legal-facts dt {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--color-ink);
}

.legal-facts dd { margin-top: 0.25rem; }

.legal a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The statutory model withdrawal form. Set off from the prose because it is a
   template the customer copies, not text they read. */
.legal .withdrawal-form {
  margin-top: 1rem;
  border: 1px solid var(--color-stone-300);
  border-radius: 0.25rem;
  padding: 1rem;
  background-color: #fff;
}

/* The admin's own vocabulary. Separate from shared/_button.html.erb, which is
   the storefront's and is not duplicated. Written as classes rather than
   utilities so one string covers f.submit, link_to, button_to and <button>. */
@layer components {
  .admin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    border-radius: 0.25rem;
    padding-inline: 1rem;
    font-weight: 500;
    border: 1px solid var(--color-stone-300);
    background-color: #fff;
    color: var(--color-ink);
  }

  .admin-btn-primary {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
    color: #fff;
  }

  .admin-btn-danger {
    border-color: var(--color-red-300);
    color: var(--color-red-700);
  }

  .admin-pill {
    display: inline-block;
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
  }

  .admin-pill-brand     { background-color: var(--color-brand); color: #fff; }
  .admin-pill-neutral   { background-color: var(--color-stone-200); color: var(--color-stone-700); }
  .admin-pill-attention { background-color: var(--color-amber-100); color: var(--color-amber-800); }
  .admin-pill-danger    { background-color: var(--color-red-100); color: var(--color-red-800); }
}