/* ============================================================
   Theme: LINEN  -  warm, restrained neighbourhood barbershop
   ------------------------------------------------------------
   For: calm, local shops - North Perth / Bayswater - the kind
   with cream walls, a single clay pot in the window and the
   newspaper folded on the bench. A transitional serif (Source
   Serif 4) over Inter, one muted clay accent, no shadows, lots
   of warm negative space. A LIGHT, low-contrast theme.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

.theme-linen {
  /* -------- Surfaces (warm linen) ----------------------- */
  --bg:        #EFEAE0;
  --bg-2:      #E5DECF;
  --surface:   #F7F3EA;

  /* -------- Text (warm dark brown on linen) ------------- */
  --fg:            #2A2620;
  --fg-muted:      #6F665A;
  --heading-color: #1F1B16;

  /* -------- Accent (single muted clay) ------------------ */
  --accent:        #9C5A3C;
  --accent-bright: #B06A48;
  --accent-hover:  #7E4528;
  --accent-2:      #9C5A3C;
  --on-accent:     #F7F3EA;

  --hairline:   rgba(42, 38, 32, 0.12);
  --hairline-2: rgba(42, 38, 32, 0.22);

  /* -------- Hero (warm-dark veil, no colour cast) ------- */
  --hero-ink: #F7F3EA;
  --hero-min-h: 82vh;
  --hero-overlay:
    radial-gradient(120% 95% at 50% 40%, rgba(31,27,22,0.32) 0%, rgba(31,27,22,0.56) 66%, rgba(22,18,14,0.84) 100%),
    linear-gradient(180deg, rgba(31,27,22,0.38) 0%, rgba(31,27,22,0.32) 42%, rgba(22,18,14,0.86) 100%);

  /* -------- Footer (deep warm brown) -------------------- */
  --footer-bg:     #1F1B16;
  --footer-fg:     rgba(247, 243, 234, 0.74);
  --footer-strong: #F7F3EA;
  --footer-head:   #C8A07A;

  /* -------- Type ---------------------------------------- */
  --font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.4rem, 5.5vw + 1rem, 4.5rem);
  --heading-weight: 500;
  --heading-tracking: -0.005em;
  --eyebrow-tracking: 0.2em;

  /* -------- Soft corners, hairline rules ---------------- */
  --radius-1: 2px;
  --radius-2: 6px;
  --radius-3: 10px;
  --radius-pill: 999px;
  --radius-btn: 6px;       /* soft, warm */
  --rule-width: 36px;
  --rule-height: 1px;
  --rule-color: var(--accent);

  --shadow-1: none;
  --shadow-2: none;
}

/* ---- Structural personality: warm, restrained ----------- */

.theme-linen h1,
.theme-linen h2,
.theme-linen h3,
.theme-linen .hero__title,
.theme-linen .footer__wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.theme-linen .rule { height: 1px; width: 36px; }

.theme-linen .menu-group {
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: none;
}
.theme-linen .menu-group__title { border-bottom: 1px solid var(--hairline-2); }
.theme-linen .menu-group__title h3 { font-family: var(--font-display); font-weight: 600; }
.theme-linen .menu-row__price {
  color: var(--accent);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

.theme-linen .btn {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.theme-linen .btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}

.theme-linen .btn--ghost {
  background: transparent;
  color: var(--hero-ink);
  border: 1px solid color-mix(in srgb, var(--hero-ink) 55%, transparent);
}
.theme-linen .btn--ghost:hover {
  background: var(--hero-ink);
  color: #1F1B16;
  border-color: var(--hero-ink);
}

.theme-linen .link-quiet:hover { color: var(--accent-bright); border-color: currentColor; }

.theme-linen .socials a { border-color: var(--hairline-2); color: var(--fg); }
.theme-linen .socials a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.theme-linen .hours-table .badge,
.theme-linen .map__open { background: var(--accent); color: var(--on-accent); }
.theme-linen .map__open:hover { background: var(--accent-hover); color: var(--on-accent); }