/* ============================================================
   BREAD & ROSES · base.css
   Design tokens, reset, typography, shared UI primitives.
   Loaded on EVERY page (public storefront + admin).

   CONTENTS
     1. Design tokens .............. :root
     2. Reset & box model
     3. Typography ................. h1–h4, a, p, ul
     4. Buttons .................... .btn / .btn-primary / .btn-danger
                                     .btn-sm / .btn-lg
     5. Forms ...................... .input / .field-label
                                     .form-row / .form-actions / .checkbox-label
     6. Filter pills ............... .filter-btn  (category filter + admin tabs)
     7. Alerts ..................... .alert / .alert-*
     8. Site logo .................. .site-logo / .logo-sub
     9. Helpers .................... .empty-msg
   ============================================================ */

/* ---- 1. DESIGN TOKENS ---- */
:root {
  --bg: #f2ede4;
  --fg: #111;
  --red: #cc1100;
  --red-dark: #990d00;

  --border: 3px solid #111;
  --border-thin: 1px solid #111;

  --font: "Courier New", Courier, monospace;
  --font-size: 1rem;
}

/* ---- 2. RESET & BOX MODEL ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scrollbar-gutter: stable; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- 3. TYPOGRAPHY ---- */
h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.1;
}
h1 { font-size: 2rem;    border-bottom: var(--border);      padding-bottom: 0.4rem;  margin-bottom: 1.2rem; }
h2 { font-size: 1.25rem; border-bottom: var(--border-thin); padding-bottom: 0.25rem; margin-bottom: 0.8rem; }
h3 { font-size: 1rem; }

a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

p { margin-bottom: 0.8rem; }
ul { list-style: none; }

/* ---- 4. BUTTONS ---- */
.btn {
  display: inline-block;
  border: var(--border);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  cursor: pointer;
  text-decoration: none;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.btn:hover { background: var(--fg); color: var(--bg); text-decoration: none; }
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary:hover { background: var(--red); border-color: var(--red); color: var(--bg); }
.btn-danger { border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red); color: var(--bg); }
.btn-sm { font-size: 0.78rem; padding: 0.25rem 0.6rem; border-width: 2px; }
.btn-lg { font-size: 1.05rem; padding: 0.65rem 1.5rem; }

/* ---- 5. FORMS ---- */
.input {
  border: var(--border);
  background: white;
  color: var(--fg);
  font-family: var(--font);
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
  width: 100%;
}
.input:focus { outline: 3px solid var(--red); outline-offset: 0; }
.input-sm { width: auto; min-width: 80px; }
.input-wide { flex: 2; }
textarea.input { resize: vertical; min-height: 80px; }
select.input { cursor: pointer; }

.field-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #777;
  font-weight: 700;
}

.form-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.form-row label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.form-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.5rem; }
.checkbox-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; cursor: pointer; }

/* ---- 6. FILTER PILLS ---- */
/* Shared by the public category filter and the admin week/view tabs. */
.filter-btn {
  border: var(--border-thin);
  padding: 0.3rem 0.8rem;
  font-family: var(--font);
  font-size: 0.85rem;
  color: var(--fg);
  text-decoration: none;
  text-transform: lowercase;
}
.filter-btn:hover, .filter-btn--active {
  background: var(--fg);
  color: var(--bg);
  text-decoration: none;
}

/* ---- 7. ALERTS ---- */
.alert {
  border: var(--border);
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.alert-error   { border-color: var(--red); background: #fff0ee; color: var(--red); }
.alert-warning { background: #fffbe6; border-color: #888; }
.alert-success { background: #eaffea; border-color: #090; color: #060; }

/* ---- 8. SITE LOGO ---- */
/* Used by both the public header and the admin header (both dark). */
.site-logo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bg);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.logo-sub { color: var(--red); font-size: 0.8rem; margin-left: 0.3rem; }

/* ---- 9. HELPERS ---- */
.empty-msg { color: #777; font-style: italic; }