/* Madelene — shared tokens. Brand sage #88967D with white lettering. */
:root {
  --brand: #88967d;          /* sage: page/hero background; white text only at ≥ 20px bold (3.1:1) */
  --on-brand: #ffffff;
  --paper: #f1f2ec;          /* dashboard page background */
  --surface: #fbfaf6;        /* ivory card */
  --surface-2: #f0efe7;      /* inputs, unselected options */
  --ink: #2f3a2a;            /* 11.4:1 on --surface */
  --ink-2: #4f5e47;          /* 6.7:1 */
  --muted: #6b7566;          /* 4.6:1 */
  --primary: #4f5e47;        /* buttons & selected state; white text 6.9:1 */
  --on-primary: #fbfaf6;
  --border: #e2e2d6;
  --border-strong: #c3c9b8;
  --ring: #4f5e47;
  --danger: #b23a2e;
  --shadow: 0 1px 2px rgb(47 58 42 / 0.05), 0 8px 24px rgb(47 58 42 / 0.08);
  --shadow-lg: 0 2px 4px rgb(47 58 42 / 0.06), 0 24px 48px rgb(47 58 42 / 0.16);

  /* rating scale, diverging: excellent (green) → needs improvement (terracotta) */
  --lv-4: #4f5e47;
  --lv-3: #93a385;
  --lv-2: #d9b99b;
  --lv-1: #b5674d;

  --radius-lg: 28px;
  --radius: 18px;
  --radius-sm: 12px;
  --font-script: "Pinyon Script", cursive;
  --font-head: "Amiri", serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #3b4735;
    --on-brand: #ffffff;
    --paper: #161a14;
    --surface: #20261d;
    --surface-2: #2a3126;
    --ink: #eef0e8;
    --ink-2: #c9d2bf;
    --muted: #aab3a2;
    --primary: #b9c6ad;
    --on-primary: #1b2018;
    --border: #343d2f;
    --border-strong: #4a5543;
    --ring: #b9c6ad;
    --danger: #ff9b8a;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.3), 0 24px 48px rgb(0 0 0 / 0.45);
    --lv-4: #b9c6ad;
    --lv-3: #7d8c70;
    --lv-2: #a77a5f;
    --lv-1: #e0957a;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  min-height: 100dvh;
}

h1, h2, h3 { line-height: 1.4; margin: 0; }

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

:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* Logo is single-colour line art, painted with the current text colour. */
.logo {
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("/brand/logo") center / contain no-repeat;
  mask: url("/brand/logo") center / contain no-repeat;
}

.script { font-family: var(--font-script); font-weight: 400; line-height: 1; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 1.5px solid transparent;
  background: var(--primary); color: var(--on-primary);
  font-weight: 600; cursor: pointer; touch-action: manipulation;
  transition: transform 160ms var(--ease), opacity 160ms var(--ease), background-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.btn:hover { box-shadow: 0 6px 16px rgb(47 58 42 / 0.18); }
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); box-shadow: none; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }

.field {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  background: var(--surface-2);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.field::placeholder { color: var(--muted); opacity: .8; }
.field:hover { border-color: var(--border-strong); }
.field:focus-visible { outline: none; background: var(--surface); border-color: var(--ring); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 18%, transparent); }
textarea.field { min-height: 104px; resize: vertical; }

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-inline-end-color: transparent;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}