/* ============================================================
   BASE — shared across the Engineering Runbook site
   Design tokens, reset, page bar, masthead, tags, footer,
   focus states, and the floating "back to top" button.

   Strictly follows starbucks/DESIGN.md:
     • Warm-cream canvas, four-tier green system
     • Full-pill (9999px) geometry, 12px card radius
     • Tight -0.01em SoDoSans-substitute tracking (Inter)
     • scale(0.95) universal active press
     • Layered low-alpha shadows (never one heavy drop)
     • Frap-style floating circular element (here: back-to-top)
   ============================================================ */

:root {
  /* Starbucks four-tier green system */
  --green-starbucks:   #006241;  /* brand headings */
  --green-accent:      #00754A;  /* CTAs, active states */
  --green-house:       #1E3932;  /* dark bands, footer */
  --green-light:       #d4e9e2;  /* badge tint */

  /* Canvas — warm cream, not cold white */
  --canvas:            #f2f0eb;  /* Neutral Warm */
  --canvas-soft:       #edebe9;  /* Ceramic */

  /* Text */
  --ink:               rgba(0,0,0,0.87);  /* Text Black */
  --ink-soft:          #006241;           /* Starbucks Green */
  --body:              rgba(0,0,0,0.87);  /* Text Black */
  --body-strong:       rgba(0,0,0,0.87);
  --muted:             rgba(0,0,0,0.68);  /* Text Black Soft — bumped for AA at 13px */
  --muted-soft:        rgba(0,0,0,0.60);

  /* Hairlines */
  --hairline:          #e7e7e7;
  --hairline-soft:     #f9f9f9;
  --hairline-strong:   #d6dbde;

  /* Surfaces */
  --surface-card:      #ffffff;
  --surface-strong:    #edebe9;  /* Ceramic */
  --surface-dark:      #1E3932;  /* House Green */
  --on-primary:        #ffffff;
  --on-dark:           rgba(255,255,255,1);
  --on-dark-soft:      rgba(255,255,255,0.70);

  /* Status colors — Starbucks semantic palette */
  --status-done:       #006241;  /* Starbucks Green */
  --status-progress:   #8a5a0e;  /* amber — darkened for WCAG AA */
  --status-blocked:    #b01a10;  /* red — darkened for WCAG AA */
  --status-planned:    rgba(0,0,0,0.68);

  /* Semantic mappings */
  --bg:                var(--canvas);
  --bg-shade:          var(--canvas-soft);
  --rule:              var(--hairline);
  --accent:            var(--green-accent);
  --accent-soft:       var(--green-starbucks);
  --card-bg:           var(--surface-card);

  /* Elevation — layered, low-alpha (DESIGN.md §6) */
  --shadow-card:       0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24);
  --shadow-lift:       0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07);
  --shadow-nav:        0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07);

  /* Motion */
  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --press:             scale(0.95);  /* universal active state */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em; /* tight SoDoSans-signature tracking */
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

::selection { background: var(--ink-soft); color: var(--on-primary); }

a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--muted); }

/* Keyboard focus — visible green ring, never shown on mouse click */
:focus-visible {
  outline: 2px solid var(--green-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ──────────  PAGE BAR  ────────── */

.pagebar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--canvas);
  border-bottom: 1px solid var(--rule);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.pagebar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.pagebar a,
.pagebar .here {
  padding: 6px 14px;
  border-radius: 9999px; /* pill geometry */
  text-decoration: none;
  color: var(--body);
  transition: color 0.2s var(--ease-out),
              background 0.2s var(--ease-out),
              transform 0.1s ease;
}

.pagebar a:hover {
  color: var(--ink);
  background: var(--surface-strong);
  text-decoration: none;
}

.pagebar a:active { transform: var(--press); }

.pagebar .here {
  color: var(--on-primary);
  font-weight: 500;
  background: var(--green-accent);
  cursor: default;
}

.pagebar-sep {
  color: var(--hairline-strong);
  user-select: none;
  padding: 0 2px;
  opacity: 0.6;
}

/* ──────────  MASTHEAD (shared structure; sizing per page)  ────────── */

.masthead {
  padding: 96px 0;
  text-align: center;
}

.kicker {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 16px;
}

.masthead h1 {
  font-family: "Lora", "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  font-size: clamp(42px, 6vw, 64px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  color: var(--green-starbucks);
}

.dek {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--body);
  margin: 0 auto;
  max-width: 680px;
}

/* ──────────  TAG CHIP (shared base; size tuned per page)  ────────── */

.tag {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--body);
  background: var(--surface-strong);
  padding: 4px 10px;
  border-radius: 9999px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.tag:hover {
  background: var(--green-accent);
  color: var(--on-primary);
}

.tag:active { transform: var(--press); }

/* ──────────  FLOATING "BACK TO TOP"  (Frap-style, DESIGN.md §4.8)  ────── */

.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--green-accent);
  color: var(--on-primary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  /* layered Frap shadow stack: base halo + directional ambient */
  box-shadow: 0 0 6px rgba(0,0,0,0.24), 0 8px 12px rgba(0,0,0,0.14);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out),
              transform 0.3s var(--ease-out),
              box-shadow 0.2s ease;
}

.to-top.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.to-top:hover {
  box-shadow: 0 0 6px rgba(0,0,0,0.24), 0 10px 18px rgba(0,0,0,0.18);
}

.to-top:active {
  /* ambient shadow collapses on press, scale(0.95) signature */
  box-shadow: 0 0 6px rgba(0,0,0,0.24), 0 8px 12px rgba(0,0,0,0);
  transform: scale(0.95);
}

/* ──────────  FOOTER  ────────── */

.footer {
  border-top: 1px solid var(--rule);
  padding: 64px 0;
  text-align: center;
}

.footer p {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

/* ──────────  RESPONSIVE (shared)  ────────── */

@media (max-width: 768px) {
  .container { padding: 0 24px; }

  .to-top {
    right: 16px;
    bottom: 16px;
  }
}