/* ======================================== */
/* Green Door Espresso */
/* espresso.css */
/* ======================================== */

:root {

  --bg:
    #f6f4ee;

  --card:
    #ffffff;

  --border:
    #d8d2c7;

  --text:
    #2f382f;

  --muted:
    #667066;

  --accent:
    #4f6b4f;

  --tag:
    #edf3ea;

  --highlight:
    #eef4ea;

  --shadow:
    0 2px 10px rgba(0,0,0,0.04);

  --radius:
    14px;

}

/* ======================================== */
/* Base */
/* ======================================== */

* {

  box-sizing:
    border-box;

}

body {

  margin:
    0;

  padding:
    0;

  background:
    var(--bg);

  color:
    var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height:
    1.7;

}

/* ======================================== */
/* Layout */
/* ======================================== */

.container {

  width:
    100%;

  max-width:
    980px;

  margin:
    0 auto;

  padding:
    28px 18px 80px;

}

/* ======================================== */
/* Hero */
/* ======================================== */

.hero {

  margin-bottom:
    28px;

}

.hero-title {

  margin:
    0 0 12px;

  font-size:
    2rem;

  font-weight:
    700;

  color:
    var(--accent);

  letter-spacing:
    -0.02em;

}

.hero-subtitle {

  margin:
    0;

  color:
    var(--muted);

  font-size:
    0.98rem;

  line-height:
    1.8;

}

/* ======================================== */
/* Control Panel */
/* ======================================== */

.control-panel {

  background:
    var(--card);

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  padding:
    18px;

  margin-bottom:
    24px;

  box-shadow:
    var(--shadow);

}

.control-grid {

  display:
    grid;

  grid-template-columns:
    repeat(auto-fit, minmax(240px, 1fr));

  gap:
    18px;

}

.field {

  display:
    flex;

  flex-direction:
    column;

}

.field label {

  margin-bottom:
    8px;

  font-size:
    0.9rem;

  font-weight:
    600;

  color:
    var(--accent);

}

.field select {

  width:
    100%;

  padding:
    12px 14px;

  border:
    1px solid var(--border);

  border-radius:
    10px;

  background:
    white;

  font-size:
    0.95rem;

  color:
    var(--text);

  outline:
    none;

}

.field select:focus {

  border-color:
    var(--accent);

}

/* ======================================== */
/* Result Sections */
/* ======================================== */

.result-section {

  background:
    var(--card);

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  padding:
    22px;

  margin-bottom:
    22px;

  box-shadow:
    var(--shadow);

}

/* ======================================== */
/* Coffee Title */
/* ======================================== */

.coffee-name {

  font-size:
    1.55rem;

  font-weight:
    700;

  margin-bottom:
    8px;

  color:
    var(--accent);

}

.coffee-meta {

  color:
    var(--muted);

  font-size:
    0.95rem;

  margin-bottom:
    18px;

}

/* ======================================== */
/* Tags */
/* ======================================== */

.tag-list {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

}

.tag {

  background:
    var(--tag);

  color:
    var(--accent);

  padding:
    8px 12px;

  border-radius:
    999px;

  font-size:
    0.85rem;

  font-weight:
    500;

}

/* ======================================== */
/* Section Titles */
/* ======================================== */

.section-title {

  font-size:
    1.08rem;

  font-weight:
    700;

  color:
    var(--accent);

  margin-bottom:
    18px;

}

/* ======================================== */
/* Analysis */
/* ======================================== */

.analysis {

  color:
    var(--text);

}

.analysis p {

  margin:
    0;

  line-height:
    1.9;

}

.analysis-highlight {

  background:
    var(--highlight);

  border-left:
    4px solid var(--accent);

  padding:
    16px 18px;

  border-radius:
    10px;

  line-height:
    1.8;

}

/* ======================================== */
/* Recipe Grid */
/* ======================================== */

.recipe-grid {

  display:
    grid;

  grid-template-columns:
    repeat(auto-fit, minmax(220px, 1fr));

  gap:
    16px;

}

.recipe-item {

  background:
    #fafaf8;

  border:
    1px solid var(--border);

  border-radius:
    12px;

  padding:
    16px;

}

.recipe-item h3 {

  margin:
    0 0 10px;

  font-size:
    0.9rem;

  color:
    var(--accent);

}

.recipe-item p {

  margin:
    0;

  font-size:
    0.95rem;

  line-height:
    1.7;

}

/* ======================================== */
/* Pour Steps */
/* ======================================== */

.pour-step {

  border:
    1px solid var(--border);

  border-radius:
    12px;

  padding:
    18px;

  margin-bottom:
    16px;

  background:
    #fcfcfa;

}

.pour-title {

  font-weight:
    700;

  color:
    var(--accent);

  margin-bottom:
    12px;

}

.pour-detail {

  line-height:
    1.9;

  color:
    var(--text);

}

/* ======================================== */
/* Mobile */
/* ======================================== */

@media (max-width: 640px) {

  .container {

    padding:
      18px 14px 60px;

  }

  .hero-title {

    font-size:
      1.6rem;

  }

  .recipe-grid {

    grid-template-columns:
      1fr;

  }

}