/* ─── Joe's Websites — Shared CSS ────────────────────────────────────────────
 * CSS variables + utility classes.
 * Included on every page via style.css.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap");

:root {
  /* Ink — near-black text, buttons, dark cards */
  --ink:        #1b1a1f;
  --ink-soft:   #2c2b31;

  /* Green accent */
  --green:      #2e945e;
  --green-mint: #def3e7;
  --forest:     #122c1e;
  --forest-mid: #253f31;

  /* Carousel card */
  --navy:       #0a315c;

  /* Neutrals */
  --cream:      #fbf8f1;
  --chip:       #efece7;
  --white:      #ffffff;
  --text:       #1b1a1f;
  --text-muted: #5c5b60;
  --text-light: #8b8a8f;
  --border:     #e3e0d8;

  /* Feedback */
  --success:    #2d7a3f;
  --success-bg: #edf7ef;
  --danger:     #c0392b;
  --danger-bg:  #fdf2f0;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(27, 26, 31, 0.08);
  --shadow-md:  0 4px 16px rgba(27, 26, 31, 0.1);
  --shadow-lg:  0 8px 32px rgba(27, 26, 31, 0.14);

  /* Shape */
  --radius:    12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --radius-btn: 8px;

  /* Motion */
  --transition: 0.2s ease;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-head: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;

  /* Layout */
  --max-width: 1200px;
}

/* ── Utility ──────────────────────────────────────────────────────────────── */

/* Display */
.hidden        { display: none !important; }
.d-block       { display: block; }
.flex-row      { display: flex; flex-wrap: wrap; gap: 1rem; }
.flex-row-sm   { display: flex; flex-wrap: wrap; gap: .75rem; }
.flex-center   { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.flex-shrink-0 { flex-shrink: 0; }
.mt-auto       { margin-top: auto; }
.w-full        { width: 100%; }
.w-fit         { width: fit-content; }

/* Typography */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.nowrap      { white-space: nowrap; }
.text-muted  { color: var(--text-muted); }
.text-light  { color: var(--text-light); }
.text-sm     { font-size: .9rem; }
.text-xs     { font-size: .8rem; }
.italic      { font-style: italic; }

/* Spacing — margin-top */
.mt-tiny { margin-top: .35rem; }
.mt-1    { margin-top: .5rem; }
.mt-sm   { margin-top: .75rem; }
.mt-2    { margin-top: 1rem; }
.mt-3    { margin-top: 1.5rem; }
.mt-xl   { margin-top: 2.5rem; }

/* Spacing — margin-bottom */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* State */
.is-disabled { opacity: .6; }

/* Conditional fields: disabled + dimmed (not hidden) */
.conditional        { opacity: .38; transition: opacity .2s ease; }
.conditional.active { opacity: 1; }
.conditional textarea,
.conditional input  { background: var(--chip); cursor: not-allowed; }
.conditional.active textarea,
.conditional.active input { background: var(--white); cursor: auto; }

/* Text selection — dark ink highlight on bright backgrounds (dark surfaces invert in style.css) */
::selection      { background: var(--ink); color: var(--cream); }
::-moz-selection { background: var(--ink); color: var(--cream); }

/* Native form controls */
input[type="date"] { color-scheme: light; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; transition: opacity .15s; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

input[type="file"]::file-selector-button {
  background: var(--ink);
  color: white;
  border: none;
  padding: .4rem .9rem;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  margin-right: .75rem;
  transition: background var(--transition);
}
input[type="file"]:hover::file-selector-button { background: var(--ink-soft); }

/* Alerts */
.alert-success { background: var(--success-bg); color: var(--success); border: 1px solid #b2dfbb; border-radius: var(--radius); padding: .75rem 1rem; }
.alert-error   { background: var(--danger-bg);  color: var(--danger);  border: 1px solid #f5c6c2; border-radius: var(--radius); padding: .75rem 1rem; }