/* =========================================================================
   Uganda Bookshop — design foundation
   Warm paper, editorial sans, soft sunlit accents.
   ========================================================================= */

/* ---- Theme tokens (overridable via data-theme / data-type) ---- */
:root {
  /* Warm Paper (default) */
  --paper:      oklch(0.975 0.013 82);
  --paper-2:    oklch(0.962 0.018 80);
  --surface:    oklch(0.995 0.006 85);
  --surface-2:  oklch(0.984 0.012 82);
  --ink:        oklch(0.255 0.014 62);
  --ink-soft:   oklch(0.40 0.014 62);
  --muted:      oklch(0.545 0.016 66);
  --faint:      oklch(0.70 0.014 70);
  --line:       oklch(0.905 0.012 78);
  --line-soft:  oklch(0.935 0.010 80);

  --sun:        oklch(0.86 0.135 88);
  --sun-deep:   oklch(0.80 0.145 80);
  --apricot:    oklch(0.78 0.125 56);
  --apricot-deep: oklch(0.70 0.14 50);
  --rose:       oklch(0.80 0.085 35);
  --sage:       oklch(0.80 0.05 150);

  --accent:        var(--apricot);
  --accent-deep:   var(--apricot-deep);
  --accent-ink:    oklch(0.32 0.05 52);

  --grad-warm: linear-gradient(135deg,
                 oklch(0.95 0.05 92) 0%,
                 oklch(0.92 0.075 75) 45%,
                 oklch(0.90 0.085 50) 100%);
  --grad-soft: linear-gradient(160deg,
                 oklch(0.985 0.02 88) 0%,
                 oklch(0.965 0.045 70) 100%);

  --shadow-sm: 0 1px 2px oklch(0.4 0.03 60 / 0.06), 0 1px 1px oklch(0.4 0.03 60 / 0.04);
  --shadow-md: 0 4px 14px oklch(0.40 0.04 60 / 0.08), 0 2px 6px oklch(0.4 0.03 60 / 0.05);
  --shadow-lg: 0 18px 48px oklch(0.36 0.05 56 / 0.16), 0 6px 18px oklch(0.4 0.04 60 / 0.08);
  --shadow-cover: 0 12px 30px oklch(0.35 0.05 55 / 0.22), 0 3px 8px oklch(0.35 0.05 55 / 0.12);

  --r-xs: 7px;
  --r-sm: 11px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  --maxw: 1240px;
  --gutter: clamp(18px, 4vw, 48px);

  --font-display: "Schibsted Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sunlit theme */
[data-theme="sunlit"] {
  --paper:   oklch(0.972 0.03 86);
  --paper-2: oklch(0.955 0.045 82);
  --surface: oklch(0.992 0.014 88);
  --accent:      var(--sun-deep);
  --accent-deep: var(--apricot-deep);
  --grad-warm: linear-gradient(135deg,
                 oklch(0.93 0.085 92) 0%,
                 oklch(0.88 0.12 72) 50%,
                 oklch(0.84 0.13 46) 100%);
}

/* Ink & Cream theme */
[data-theme="ink"] {
  --paper:   oklch(0.978 0.006 80);
  --paper-2: oklch(0.965 0.008 80);
  --surface: oklch(0.997 0.003 85);
  --accent:        oklch(0.30 0.02 60);
  --accent-deep:   oklch(0.24 0.02 60);
  --accent-ink:    oklch(0.99 0 0);
  --sun:     oklch(0.88 0.07 88);
  --apricot: oklch(0.84 0.06 56);
  --grad-warm: linear-gradient(150deg,
                 oklch(0.965 0.02 85) 0%,
                 oklch(0.94 0.03 70) 100%);
}

/* Type themes */
[data-type="grotesque"] {
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
}
[data-type="clean"] {
  --font-display: "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
::selection { background: var(--sun); color: var(--ink); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); }

/* ---------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.app-root { min-height: 100vh; display: flex; flex-direction: column; }
.screen { flex: 1 0 auto; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-ink); display: inline-flex; align-items: center; gap: 8px;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 13px 20px; border-radius: var(--r-pill); border: 1px solid transparent;
  transition: transform .18s var(--ease), background .2s, color .2s, box-shadow .2s, border-color .2s;
  white-space: nowrap; user-select: none;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: oklch(0.18 0.014 60); box-shadow: var(--shadow-md); }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: var(--accent-deep); box-shadow: 0 6px 18px oklch(0.7 0.14 55 / .35); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: var(--surface-2); }
.btn--soft { background: var(--surface-2); color: var(--ink); border-color: transparent; }
.btn--soft:hover { background: var(--paper-2); }
.btn--block { width: 100%; }
.btn--lg { padding: 16px 26px; font-size: 16px; }
.btn--sm { padding: 9px 14px; font-size: 13.5px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* chips / pills */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  transition: all .18s var(--ease); white-space: nowrap;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip--on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
}
.badge--sun { background: var(--sun); color: var(--accent-ink); }
.badge--sale { background: oklch(0.62 0.18 28); color: white; }
.badge--low { background: oklch(0.95 0.04 70); color: oklch(0.45 0.12 50); }
.badge--soft { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

/* ---------------------------------------------------------------- cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }

/* form fields */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.input, .select, textarea.input {
  width: 100%; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 12px 14px; font-size: 15px; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--faint); }
.input:focus, .select:focus, textarea.input:focus {
  outline: none; border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px oklch(0.78 0.12 56 / 0.18);
}

/* star rating */
.stars { display: inline-flex; gap: 2px; color: var(--sun-deep); }
.stars svg { width: 15px; height: 15px; }
.stars--lg svg { width: 19px; height: 19px; }

/* divider */
.hr { height: 1px; background: var(--line); border: 0; }

/* skeleton / placeholder image */
.ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(45deg,
      oklch(0.93 0.02 80) 0 11px, oklch(0.90 0.025 78) 11px 22px);
  color: var(--muted);
}
.ph__label {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px;
  letter-spacing: 0.04em; color: oklch(0.45 0.02 70); padding: 10px;
}

/* generic helpers */
.muted { color: var(--muted); }
.center { text-align: center; }
.flex { display: flex; }
.between { display: flex; align-items: center; justify-content: space-between; }
.gap-s { gap: 8px; } .gap-m { gap: 16px; } .gap-l { gap: 24px; }

/* sticky utility */
.sticky { position: sticky; top: 84px; }

/* scroll row */
.scrollrow { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px; scrollbar-width: thin; }
.scrollrow > * { scroll-snap-align: start; flex: 0 0 auto; }

/* fade/rise entrance */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .6s var(--ease-out) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .fade { animation: fade .4s var(--ease) both; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

/* toast */
.toast-wrap { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 120; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 11px; pointer-events: auto;
  background: var(--ink); color: var(--paper); padding: 13px 18px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg); font-size: 14.5px; font-weight: 500;
  animation: toastIn .35s var(--ease-out) both;
}
.toast svg { width: 18px; height: 18px; color: var(--sun); }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

/* number stepper */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--surface); overflow: hidden; }
.stepper button { width: 38px; height: 38px; display: grid; place-items: center; color: var(--ink-soft); transition: background .15s; }
.stepper button:hover { background: var(--surface-2); }
.stepper span { min-width: 34px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* link */
.link { color: var(--accent-ink); font-weight: 600; border-bottom: 1.5px solid oklch(0.8 0.1 60 / .5); transition: border-color .15s; }
.link:hover { border-color: var(--accent-deep); }

/* hide scrollbar for chip rows */
.noscroll::-webkit-scrollbar { height: 0; display: none; }