/* tribotsden/assets/css/main.css
   Uses CSS tokens defined in dark.css (default) and light.css (override).
*/

@import url("./fonts.css");

/* -----------------------------
   Tokens: typography + spacing
------------------------------ */
:root {
  /* font families */
  --font-heading: "Rockhill Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: "Rockhill Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* fluid type scale */
  --step--1: clamp(0.92rem, 0.88rem + 0.20vw, 1.00rem);
  --step-0:  clamp(1.05rem, 0.98rem + 0.35vw, 1.20rem);
  --step-1:  clamp(2.30rem, 2.12rem + 0.70vw, 2.62rem);
  --step-2:  clamp(1.62rem, 1.34rem + 1.05vw, 2.10rem);
  --step-3:  clamp(2.05rem, 1.62rem + 1.55vw, 2.85rem);

  /* spacing */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;

  /* radii */
  --r-1: 13px;
  --r-2: 23px;
  --r-3: 33px;

  /* motion */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --dur-1: 120ms;
  --dur-2: 200ms;
}

/* -----------------------------
   Base
------------------------------ */
html { font-size: 18px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  position: relative;
  isolation: isolate;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.45;
}

/* global grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;

  background-image: var(--texture-svg);
  background-size: var(--texture-size) var(--texture-size);
  opacity: var(--texture-opacity);
  mix-blend-mode: var(--texture-blend, soft-light);
}

body > * {
  position: relative;
  z-index: 1;
}

h1, h2, h3 {
  font-family: var(--font-heading);
}

h1 { font-size: var(--step-3); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--step-2); line-height: 1.10; font-weight: 800; letter-spacing: -0.02em; }
h3 { font-size: var(--step-1); line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }

small, .text-sm { font-size: var(--step--1); }

.mono,
.price,
.money {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.tbc-emblem { color: var(--text); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* -----------------------------
   Header
------------------------------ */
.site-header {
  background: var(--bg);
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
}

.site-logo {
  display: flex;
  align-items: center;
  color: var(--text);
}

.header-nav .nav-menu,
.header-right .utility-menu {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav a,
.header-right a {
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}

.header-nav a:hover,
.header-right a:hover {
  text-decoration: underline;
}

/* -----------------------------
   Takeout (FULL BLEED GRID)
------------------------------ */
.takeout-container {
  max-width: none;
  margin: 0;
  padding: 0;
}

.takeout-container > h1 {
  padding: 2rem;
  margin: 0;
  border-bottom: 2px solid var(--border);
}

.takeout-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 0;
  border-top: 2px solid var(--border);
  border-left: 2px solid var(--border);
}

/* Responsive columns */
@media (max-width: 1200px) {
  .takeout-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .takeout-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .takeout-grid { grid-template-columns: 1fr; }
}

/* -----------------------------
   Beer Card
------------------------------ */
.beer-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  
  min-height: 0;

  padding: 0;
  text-align: center;

  background: var(--bg);
  color: var(--text);

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

  transition:
    background var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}

.beer-card > * {
  min-height: 0;
}

.beer-card:hover {
  background: var(--surface-muted, var(--bg));
}

.beer-card h3 {
  margin: 0.25rem 0 0;
}

.beer-card p {
  margin: 0;
  opacity: 0.85;
}

/* -----------------------------
   Can Viewer
------------------------------ */
.can-viewer {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg);
}

/* -----------------------------
   Buttons
------------------------------ */
.add-to-cart {
  margin-top: auto;

  background: transparent;
  color: var(--text);

  border: 2px solid var(--border);
  border-radius: 999px;

  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;

  transition:
    background var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}

.add-to-cart:hover {
  background: var(--text);
  color: var(--bg);
}