/* Crave — token-urile din brandbook (Brand Guides Crave 2021) și piesele comune tuturor
   paginilor: prezentare, cont, plată, rețete.

   Culorile sunt măsurate pe slide-uri. Portocaliul de brand (#EB5E03) e pentru logo,
   suprafețe și butoane cu text mare; textul mic de accent folosește o nuanță mai închisă
   (#B84300), pentru că alb pe portocaliu are doar 3,4:1 și portocaliu pe crem la fel.

   Fontul brandului e Avenir Next: Heavy pentru titluri, motto și butoane, Regular pentru
   restul. Pe Mac, iPhone și iPad e deja în sistem; în rest cade pe Nunito Sans, cea mai
   apropiată liberă. Browserul nu descarcă Nunito acolo unde găsește Avenir Next.

   Numele variabilelor sunt cele din macheta browserului de rețete (--bg, --accent,
   --vegan…), ca retete.css să rămână aproape de mock-ui.html. */
:root {
  --crave: #eb5e03;            /* portocaliul din logo */
  --bg: #fbf6ef;
  --surface: #ffffff;
  --cream: #f4e4d8;            /* fundalul din brandbook */
  --sage: #d8dcbc;
  --plum: #24002c;
  --brown: #7a3509;            /* „dark tones & typography" */
  --ink: #2a1a12;
  --muted: #6e5a4c;
  --line: #eadccd;
  --accent: #eb5e03;
  --accent-text: #b84300;
  --accent-strong: #c94f00;    /* fundal pentru butoane mici: alb pe el are 4,56:1 */
  --accent-soft: #fce6d6;
  --on-accent: #ffffff;
  /* Macronutrienții, după macheta lui Cori: proteinele verzi (să se vadă că sunt cele bune),
     glucidele galbene, grăsimile coral. Proteinele sunt cele mai închise și glucidele cele mai
     deschise, ca bara să se citească și cu daltonism roșu-verde. Meniurile au nuanțe departe
     de ele, ca eticheta să nu pară o bucată din bara de dedesubt. */
  --protein: #23693f;
  --carbs: #e3ad17;
  --fat: #d75f48;
  --vegan: #17736b;      --vegan-bg: #dcefec;
  --lacto: #2f5f9e;      --lacto-bg: #e3ebf6;
  --faracarne: #6a4c9c;  --faracarne-bg: #ece6f5;
  --omnivor: #7a3509;    --omnivor-bg: #f6e2d3;
  --error: #a4161a;      --error-bg: #fbe3e1;
  --ok: #2e6b22;         --ok-bg: #e3eed8;
  --shadow: 0 1px 2px rgb(42 26 18 / .06), 0 8px 24px rgb(42 26 18 / .08);
  --display: "Avenir Next", "Avenir", "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --body: "Avenir Next", "Avenir", "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --heavy: 800;
  --textura: url("../img/textura.svg");
  --textura-deschisa: url("../img/textura-deschisa.svg");
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1511; --surface: #251c17; --cream: #2e231c; --ink: #ede3da; --muted: #b4a497; --line: #3a2d25;
    --accent: #ff7a26; --accent-text: #ff8a3d; --accent-strong: #ff7a26; --accent-soft: #3d2416; --on-accent: #1c0d03;
    --protein: #45a96d; --carbs: #f0c44a; --fat: #f59a82;
    --vegan: #6fd0c4; --vegan-bg: #163330; --lacto: #8fb4ea; --lacto-bg: #1c2a3d; --faracarne: #b9a2e6; --faracarne-bg: #2a2340;
    --omnivor: #e6a982; --omnivor-bg: #3a2418; --error: #ff9b93; --error-bg: #3d1716; --ok: #8fd47e; --ok-bg: #1f3319;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);
    --textura: url("../img/textura-deschisa.svg");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1c1511; --surface: #251c17; --cream: #2e231c; --ink: #ede3da; --muted: #b4a497; --line: #3a2d25;
  --accent: #ff7a26; --accent-text: #ff8a3d; --accent-strong: #ff7a26; --accent-soft: #3d2416; --on-accent: #1c0d03;
  --protein: #45a96d; --carbs: #f0c44a; --fat: #f59a82;
  --vegan: #6fd0c4; --vegan-bg: #163330; --lacto: #8fb4ea; --lacto-bg: #1c2a3d; --faracarne: #b9a2e6; --faracarne-bg: #2a2340;
  --omnivor: #e6a982; --omnivor-bg: #3a2418; --error: #ff9b93; --error-bg: #3d1716; --ok: #8fd47e; --ok-bg: #1f3319;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);
  --textura: url("../img/textura-deschisa.svg");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { background: var(--bg); }
body { margin: 0; color: var(--ink); font: 400 16px/1.5 var(--body); -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.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; }

/* Logo: cuvântul „Crave" din brandbook, decupat din slide-ul Cortado. */
.logo { display: inline-block; line-height: 0; }
.logo img { display: block; width: auto; height: 34px; }

/* Textura de brand peste fundalurile plate. */
.textura { background-image: var(--textura); background-size: 320px; }

/* Până vin pozele: simbolul categoriei (fructele mușcate din brandbook) pe un fond în nuanța lui, cu textura de brand. */
.ph { --tint: var(--crave); display: grid; place-items: center; overflow: hidden; color: var(--ink);
  background: var(--textura), color-mix(in oklab, var(--tint) 20%, var(--surface)); background-size: 320px, auto; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph .sym { width: 68%; height: 68%; object-fit: contain; }
.ph.s-para { --tint: #f5d84a; }
.ph.s-morcov { --tint: #f2934b; }
.ph.s-broccoli { --tint: #5e9e3f; }
.ph.s-frunze { --tint: #7fb069; }
.ph.s-sfecla { --tint: #e8743b; }
.ph.s-mar-verde { --tint: #a7b43f; }
.ph.s-capsuna { --tint: #ef6a4c; }
.ph.s-smochina { --tint: #b0628c; }

/* Butoane. Eticheta e mare și îngroșată ca albul pe portocaliu să treacă la text mare (3:1). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px;
  border: 0; border-radius: 14px; background: var(--accent); color: var(--on-accent);
  font: var(--heavy) 19px/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn-block { display: flex; width: 100%; }
.btn-mic { min-height: 42px; padding: 0 16px; border-radius: 12px; font-size: 15px; background: var(--accent-strong); }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ink); border: 1.5px solid var(--line); text-transform: none; cursor: pointer;
  font: 600 16px/1.2 var(--body); letter-spacing: 0; min-height: 44px; padding: 0 16px; border-radius: 12px; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-text); filter: none; }
.btn-ghost.btn-block { display: flex; width: 100%; }
.linkbtn { border: 0; background: none; padding: 6px 0; color: var(--accent-text); font-weight: 600; cursor: pointer; font-size: 14px; text-decoration: none; }

/* Comutatorul de temă: Luminoasă / Auto / Întunecată (js/tema.js) */
.tema { display: inline-flex; padding: 2px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); }
.tema button { display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 9px; border: 0; border-radius: 999px;
  background: none; color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.tema button svg { width: 16px; height: 16px; }
.tema button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }

/* Formulare */
.camp { display: grid; gap: 6px; margin-bottom: 16px; }
.camp label { font-weight: 600; font-size: 15px; }
.camp input { width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 16px; }
.camp input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.camp input[aria-invalid="true"] { border-color: var(--error); }
/* Drop-down-urile chestionarului: ca un câmp, cu săgeata brandului (maro, vizibilă pe ambele teme). */
.camp select { width: 100%; min-height: 50px; padding: 12px 40px 12px 14px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a07f68' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
  font-size: 16px; line-height: 1.3; -webkit-appearance: none; appearance: none; white-space: normal; }
.camp select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.camp select[aria-invalid="true"] { border-color: var(--error); }
.camp .eroare { color: var(--error); font-size: 14px; }
.camp .ajutor { color: var(--muted); font-size: 13.5px; }
.parola { position: relative; }
.parola input { padding-right: 76px; }
.parola button { position: absolute; right: 6px; top: 50%; translate: 0 -50%; height: 38px; padding: 0 10px; border: 0; border-radius: 8px;
  background: none; color: var(--accent-text); font-weight: 600; font-size: 14px; cursor: pointer; }
.bifa { display: flex; align-items: center; gap: 10px; margin: -4px 0 18px; font-size: 15px; }
.bifa input { width: 20px; height: 20px; accent-color: var(--accent); }

/* Mesaje */
.flash { margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; font-size: 15px; background: var(--accent-soft); color: var(--ink); }
.flash.ok { background: var(--ok-bg); }
.flash.err { background: var(--error-bg); color: var(--error); }

/* Paginile de cont și plată: o coloană îngustă, logo deasupra, card în mijloc. */
.pagina-cont { min-height: 100vh; min-height: 100dvh; display: grid; align-content: start; justify-items: center;
  padding: max(28px, env(safe-area-inset-top, 0px)) var(--gutter-r) 40px var(--gutter-l); }
.pagina-cont > .logo { margin: 8px 0 22px; }
.pagina-cont > .logo img { height: 52px; }
.card { width: 100%; max-width: 440px; padding: 26px 22px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.card h1 { margin: 0 0 6px; font: var(--heavy) 26px/1.15 var(--display); letter-spacing: -.005em; }
.card .lede { margin: 0 0 22px; color: var(--muted); }
.card-sub { width: 100%; max-width: 440px; margin-top: 18px; text-align: center; font-size: 15px; color: var(--muted); }
.card-sub a { font-weight: 600; }