/*
 * theme.css — Northline Kitchens.
 * Direction: modern and minimal, quiet and precise like a Bulthaup catalogue —
 * warm paper-white ground, charcoal type, one deep slate-green accent, hairline
 * rules and near-square corners. Dark mode is a charcoal room with a pale sage accent.
 */

:root {
  --canvas: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #ecebe5;
  --border: #dcdad2;
  --border-strong: #9e9b90;
  --ink: #1b1c1a;
  --muted: #5d5e58;
  --accent: #2b463d;
  --accent-hover: #3a594e;
  --accent-ink: #ffffff;
  --accent-text: #2b4a3f;
  --accent-strong: #1f352d;
  --accent-soft: #e1e7e2;
  --accent-border: #b4c2b8;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfebe3;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e6dd;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f2dfdf;
  --danger-strong: #b91c1c;
  --chart-1: #2b463d;
  --chart-2: #7c285c;
  --chart-3: #7c350c;
  --chart-4: #425605;
  --chart-5: #0b5668;
  --chart-6: #5152a5;

  --font-display: "Archivo Variable", "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.035em;
  --eyebrow-tracking: 0.12em;

  --radius-btn: 2px;
  --radius-card: 3px;
  --radius-input: 2px;
  --border-w: 1px;
  --shadow-card: none;
  --shadow-btn: none;
  --btn-weight: 500;
  --card-pad: 2rem;
  --measure: 62ch;

  --x-band-bg: #1b1c1a;
  --x-band-ink: #f3f2ee;
  --x-band-muted: #a9aaa2;
  --x-band-line: #3a3b37;
}

html[data-theme="dark"] {
  --canvas: #121312;
  --surface: #1a1b1a;
  --surface-2: #222422;
  --border: #303330;
  --border-strong: #5a5e59;
  --ink: #f0efea;
  --muted: #a4a59e;
  --accent: #a3c7b7;
  --accent-hover: #bad6c9;
  --accent-ink: #10201a;
  --accent-text: #a3c7b7;
  --accent-strong: #c0ddd0;
  --accent-soft: #1d2b26;
  --accent-border: #3a5248;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #172f22;
  --success-strong: #58a474;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #3a2517;
  --warning-strong: #ca854f;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #3b191b;
  --danger-strong: #d57575;
  --chart-1: #a3c7b7;
  --chart-2: #cb70a4;
  --chart-3: #be6436;
  --chart-4: #98911a;
  --chart-5: #159670;
  --chart-6: #1c9ec8;

  --x-band-bg: #1c2a25;
  --x-band-ink: #eef1ed;
  --x-band-muted: #a7b6ae;
  --x-band-line: #34463f;
}

/* app.css — Northline Kitchens' own rules: type, bands, hero, gallery, FAQ. Tokens only. */

html { scroll-behavior: smooth; }
html.reduced-motion { scroll-behavior: auto; }
section[id] { scroll-margin-top: 5rem; }

.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
  color: var(--muted);
}

/* The top bar: a hairline, no blur. */
.topbar {
  background: var(--canvas);
  border-bottom: 1px solid var(--border);
}
.navlink { color: var(--muted); font-size: 0.875rem; transition: color 150ms; }
.navlink:hover { color: var(--ink); text-decoration: none; }

/* Hero photograph: settles from a slight zoom on load. Rests visible. */
.hero-photo img { transform-origin: 50% 60%; animation: hero-settle 1600ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
html.reduced-motion .hero-photo img { animation: none; }

/* Dark statement band. */
.band-dark { background: var(--x-band-bg); color: var(--x-band-ink); }
.band-dark .band-muted { color: var(--x-band-muted); }
.band-dark .band-line { border-color: var(--x-band-line); }

/* Services: a ruled list rather than cards. */
.svc-row { border-top: 1px solid var(--border); }
.svc-row:last-child { border-bottom: 1px solid var(--border); }

/* Gallery hover. */
.work-tile img { transition: transform 700ms cubic-bezier(.2,.7,.2,1); }
.work-tile:hover img { transform: scale(1.03); }
html.reduced-motion .work-tile img { transition: none; }

/* Testimonial quote mark. */
.quote-mark { font-family: var(--font-display); color: var(--accent-text); line-height: 1; }

/* FAQ: hairline rows, plus/minus marker. */
.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item > summary { list-style: none; cursor: pointer; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-sign { transition: transform 200ms; }
.faq-item[open] .faq-sign { transform: rotate(45deg); }

/* Quote form panel. */
.quote-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }