/* ===========================================================================
   components.css — reusable UI (buttons, inputs, cards, pills) in the
   light/colourful/playful language. Compose these; avoid bespoke CSS.
   =========================================================================== */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  padding: 15px 20px;
  font-family: var(--font-he);
  font-weight: 700;
  font-size: 21px;
  color: #fff;
  background: var(--coral);
  border: none;
  border-radius: var(--r-btn);
  box-shadow: 0 5px 0 var(--coral-d);          /* playful hard-offset */
  transition: transform .1s var(--ease), box-shadow .1s var(--ease), filter .15s var(--ease);
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--coral-d); }
.btn:hover  { filter: brightness(1.03); }

.btn--ink   { background: var(--ink);   box-shadow: 0 5px 0 #000; }
.btn--teal  { background: var(--teal);  box-shadow: 0 5px 0 var(--teal-d); }
.btn--light { background: #fff; color: var(--coral); box-shadow: 0 5px 0 rgba(0,0,0,.14); }

.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: 0 5px 0 rgba(0,0,0,.12); }

.link-btn {
  background: none; border: none; color: var(--muted);
  font-family: var(--font-body); font-size: var(--t-small); padding: var(--s2);
}
.link-btn:hover { color: var(--ink); }

/* ---- Card ---- */
.card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s5);
}

/* ---- Inputs + selects ---- */
.field { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.field label { font-family: var(--font-body); font-size: var(--t-small); font-weight: 600; color: var(--muted); }

.input, .select {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 14px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(255, 107, 94, .15);
}
.input::placeholder { color: #BCB7AC; }

.select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%232C2A38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 14px center; background-size: 13px;
}
.select:invalid { color: #BCB7AC; }

/* ---- Pills ---- */
.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 7px 14px; font-family: var(--font-body); font-size: var(--t-small);
  font-weight: 600; border-radius: var(--r-pill);
  background: #fff; border: 1.5px solid var(--line);
}

/* ---- Section heading ---- */
.head { margin-bottom: var(--s5); }
.head h1 { font-family: var(--font-he); font-size: var(--t-title); margin-bottom: var(--s2); }
.head p  { color: var(--muted); font-size: var(--t-lead); }

/* ---- Energy colour utilities (stable by index) ---- */
.e-bg-0{background:var(--e0)} .e-fg-0{color:var(--e0)}
.e-bg-1{background:var(--e1)} .e-fg-1{color:var(--e1)}
.e-bg-2{background:var(--e2)} .e-fg-2{color:var(--e2)}
.e-bg-3{background:var(--e3)} .e-fg-3{color:var(--e3)}
.e-bg-4{background:var(--e4)} .e-fg-4{color:var(--e4)}
.e-bg-5{background:var(--e5)} .e-fg-5{color:var(--e5)}

/* ---- Light "paper" surface: just a subtle authentic grain, no frame ---- */
.print-surface { position: relative; background: var(--paper); }
.print-surface::after {
  content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none;
  mix-blend-mode: multiply; opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Motion helpers ---- */
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fade-up .35s var(--ease) both; }
@keyframes pop { 0%{transform:scale(1)} 50%{transform:scale(1.12)} 100%{transform:scale(1)} }
.pop { animation: pop .3s var(--ease); }

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