/* ==========================================================================
   HOMEBEACH — Style Guide Page Styles
   Layout and component styles specific to style-guide.html.
   This file should NOT be loaded on index.html.
   Depends on: tokens.css
   ========================================================================== */

/* ---- Shell Reset ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--cream);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

/* ---- Sticky Nav ---- */
.sg-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 56px;
  border-bottom: 2px solid rgba(76,175,80,0.2);
}

.sg-nav-brand {
  font-family: 'Bangers', cursive;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}

.sg-nav-brand span { color: var(--green); }

.sg-nav-links {
  display: flex;
  gap: 0.2rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.sg-nav-links::-webkit-scrollbar { display: none; }

.sg-nav-links a {
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}

.sg-nav-links a:hover {
  color: var(--green);
  background: rgba(76,175,80,0.08);
}

/* ---- Hero Banner ---- */
.sg-hero {
  background: var(--grad-hero);
  padding: 5rem 2rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sg-hero::before {
  content: '🌊🌴🍹🦀🐚☀️🌺🏄';
  position: absolute;
  font-size: 2rem;
  top: 10px; left: 0; right: 0;
  letter-spacing: 3rem;
  opacity: 0.1;
  white-space: nowrap;
}

.sg-hero-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 1rem;
  display: block;
}

.sg-hero h1 {
  font-family: 'Bangers', cursive;
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 6rem);
  color: var(--white);
  text-shadow: 0 4px 20px rgba(0,0,0,0.15);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.sg-hero h1 span { color: var(--sand); }

.sg-hero p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.8);
  font-style: italic;
  max-width: 500px;
  margin: 0 auto;
}

/* ---- Section Layout ---- */
.sg-section {
  padding: 4rem 2rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.sg-section:nth-child(even) { background: var(--sand); }

.sg-section-inner {
  max-width: 1040px;
  margin: 0 auto;
}

.sg-section-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(0,0,0,0.06);
}

.sg-section-num {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--blue);
  background: rgba(0,168,232,0.1);
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
}

.sg-section-title {
  font-family: 'Bangers', cursive;
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--text);
}

/* ---- Utility Classes ---- */
.sg-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-light);
  display: block;
  margin-bottom: 0.5rem;
}

.sg-note {
  font-size: 0.88rem;
  color: var(--text-light);
  font-style: italic;
  margin-top: 0.4rem;
}

.sg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
}

.sg-col { flex: 1; min-width: 200px; }

.sg-code {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  display: block;
  margin-top: 0.5rem;
  color: var(--text);
  line-height: 1.8;
  white-space: pre-wrap;
}

/* ---- 01 Colour Palette ---- */
.colour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.colour-swatch {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.swatch-block {
  height: 90px;
  transition: transform 0.2s;
}

.colour-swatch:hover .swatch-block { transform: scaleY(1.08); }

.swatch-info {
  background: var(--white);
  padding: 0.75rem 1rem;
}

.swatch-name {
  font-family: 'Bangers', cursive;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  display: block;
}

.swatch-hex {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  color: var(--text-light);
  letter-spacing: 0.05em;
}

.swatch-var {
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  color: var(--navy);
  margin-top: 0.2rem;
  display: block;
}

.grad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.grad-swatch {
  border-radius: var(--radius-md);
  height: 70px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.grad-swatch-label {
  position: absolute;
  bottom: 0.6rem;
  left: 0.8rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ---- 02 Typography ---- */
.type-specimen {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}

.type-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.type-tag {
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(0,168,232,0.1);
  color: var(--blue);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
}

.type-detail {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  color: var(--text-light);
}

.t-display { font-family: 'Bangers', cursive; font-weight: 800; font-size: clamp(3rem, 8vw, 5.5rem); line-height: 0.95; color: var(--text); letter-spacing: -0.02em; }
.t-h1      { font-family: 'Bangers', cursive; font-weight: 800; font-size: 2.8rem; line-height: 1.05; color: var(--text); }
.t-h2      { font-family: 'Bangers', cursive; font-weight: 700; font-size: 2rem;   line-height: 1.1;  color: var(--text); }
.t-h3      { font-family: 'Bangers', cursive; font-weight: 700; font-size: 1.4rem; line-height: 1.2;  color: var(--text); }

.t-body-lg { font-family: 'Nunito', sans-serif; font-size: 1.15rem; line-height: 1.7;  color: var(--text); }
.t-body    { font-family: 'Nunito', sans-serif; font-size: 1rem;    line-height: 1.65; color: var(--text); }
.t-body-sm { font-family: 'Nunito', sans-serif; font-size: 0.9rem;  line-height: 1.65; color: var(--text-light); }
.t-italic  { font-family: 'Nunito', sans-serif; font-size: 1.1rem;  font-style: italic; color: var(--text-light); }

.t-mono {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
}

/* ---- 03 Buttons ---- */
.btn-showcase {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}

/* Full button set — includes extended variants only shown in style guide */
.btn {
  font-family: 'Bangers', cursive;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.7rem 2rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn:hover { transform: translate(-2px, -2px); }

.btn-primary      { background: var(--coral); color: var(--white); border: 3px solid #000; box-shadow: 4px 4px 0 #000; }
.btn-primary:hover { box-shadow: 6px 6px 0 #000; }

.btn-amber        { background: var(--sand); color: var(--ink); border: 3px solid #000; box-shadow: 4px 4px 0 #000; }
.btn-amber:hover  { box-shadow: 6px 6px 0 #000; }

.btn-sky          { background: var(--blue); color: var(--white); border: 3px solid #000; box-shadow: 4px 4px 0 #000; }
.btn-sky:hover    { box-shadow: 6px 6px 0 #000; }

.btn-lime         { background: var(--green); color: var(--white); border: 3px solid #000; box-shadow: 4px 4px 0 #000; }
.btn-lime:hover   { box-shadow: 6px 6px 0 #000; }

.btn-outline-dark  { background: transparent; color: var(--text); border: 2.5px solid var(--text); box-shadow: 3px 3px 0 var(--text); }
.btn-outline-light { background: rgba(255,255,255,0.15); color: var(--white); border: 2.5px solid rgba(255,255,255,0.6); backdrop-filter: blur(4px); }
.btn-ghost        { background: rgba(0,168,232,0.08); color: var(--blue); border: 2px solid var(--blue); }

.btn-sm { font-size: 0.9rem; padding: 0.5rem 1.2rem; }
.btn-lg { font-size: 1.3rem; padding: 1rem 2.5rem; }

.btn-dark-bg {
  background: var(--grad-games);
  padding: 2rem;
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Section tag variants (shown in buttons section) */
.section-tag {
  font-family: 'Bangers', cursive;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: var(--radius-sm);
  border: 2.5px solid currentColor;
  margin-bottom: 1rem;
}

.tag-amber { background: rgba(247,208,96,0.25); color: var(--navy); }
.tag-coral { background: rgba(245,130,90,0.15); color: var(--coral); }
.tag-lime  { background: rgba(76,175,80,0.15);  color: var(--green); }
.tag-white { background: rgba(255,255,255,0.15); color: var(--white); }

/* ---- 04 Cards ---- */
.cards-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.card-cocktail {
  border-radius: var(--radius-md);
  border: 3px solid #000;
  box-shadow: 5px 5px 0 #000;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card-cocktail:hover { transform: translate(-3px, -3px) rotate(-0.5deg); box-shadow: 8px 8px 0 #000; }

.card-cocktail-header { padding: 1.8rem; background: var(--grad-amber); }
.card-cocktail-emoji  { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; }
.card-cocktail-title  { font-family: 'Bangers', cursive; font-weight: 800; font-size: 1.4rem; color: var(--white); }
.card-cocktail-sub    { font-size: 0.82rem; color: rgba(255,255,255,0.8); font-style: italic; margin-top: 0.2rem; }
.card-cocktail-body   { background: var(--white); padding: 1.2rem 1.5rem; }
.card-cocktail-tag    { font-family: 'Space Mono', monospace; font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); }

.card-quote-light {
  background: var(--white);
  border: 1px solid rgba(240,146,10,0.15);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s;
}
.card-quote-light:hover { transform: translateY(-4px); }

.card-quote-dark {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  backdrop-filter: blur(8px);
  transition: transform 0.3s;
}
.card-quote-dark:hover { transform: translateY(-4px); }

.card-quote-mark { font-family: 'Bangers', cursive; font-size: 3.5rem; line-height: 0.5; color: var(--sand); opacity: 0.6; display: block; margin-bottom: 0.8rem; }
.card-quote-text { font-size: 1rem; font-style: italic; line-height: 1.6; color: var(--text); }
.card-quote-dark .card-quote-text { color: var(--white); }
.card-quote-attr { font-family: 'Space Mono', monospace; font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--navy); margin-top: 0.8rem; display: block; }
.card-quote-dark .card-quote-attr { color: var(--sand); }

.card-fact {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 3px solid #000;
  box-shadow: 5px 5px 0 #000;
  padding: 1.8rem;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.card-fact::before { content: attr(data-num); position: absolute; top: -0.5rem; right: 1rem; font-family: 'Bangers', cursive; font-size: 5rem; color: var(--coral); opacity: 0.07; line-height: 1; }
.card-fact:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 #000; }
.card-fact-icon  { font-size: 2rem; display: block; margin-bottom: 0.6rem; }
.card-fact-title { font-family: 'Bangers', cursive; font-weight: 700; font-size: 1.1rem; color: var(--text); margin-bottom: 0.4rem; }
.card-fact-text  { font-size: 0.9rem; line-height: 1.6; color: var(--text-light); }

.card-game {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.4rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.card-game::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(122,201,67,0.08), transparent); opacity: 0; transition: opacity 0.25s; }
.card-game:hover { border-color: rgba(122,201,67,0.3); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.card-game:hover::before { opacity: 1; }
.card-game-icon { font-size: 2.2rem; display: block; }
.card-game-name { font-family: 'Bangers', cursive; font-weight: 700; font-size: 1.05rem; color: var(--white); }
.card-game-tag  { font-family: 'Space Mono', monospace; font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); opacity: 0.6; }

/* ---- 05 Layout & Spacing ---- */
.layout-demo {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}

.layout-preview {
  border: 2px dashed rgba(0,168,232,0.3);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
  background: rgba(0,168,232,0.03);
  margin-bottom: 1rem;
}

.spacing-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed rgba(0,0,0,0.08);
}
.spacing-row:last-child { border-bottom: none; }

.spacing-block { background: var(--blue); opacity: 0.5; border-radius: 3px; height: 12px; flex-shrink: 0; }
.spacing-label { font-family: 'Space Mono', monospace; font-size: 0.62rem; color: var(--text-light); min-width: 90px; }
.spacing-value { font-family: 'Space Mono', monospace; font-size: 0.62rem; color: var(--blue); font-weight: 700; }

.radius-showcase { display: flex; flex-wrap: wrap; gap: 1rem; }
.radius-block {
  background: rgba(0,168,232,0.1);
  border: 2px solid var(--blue);
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.radius-name { font-family: 'Space Mono', monospace; font-size: 0.5rem; color: var(--text-light); text-align: center; line-height: 1.4; }

.shadow-showcase { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; }
.shadow-block { background: var(--white); border-radius: var(--radius-md); width: 100px; height: 80px; display: flex; align-items: center; justify-content: center; }
.shadow-sm-demo { box-shadow: var(--shadow-sm); }
.shadow-md-demo { box-shadow: var(--shadow-md); }
.shadow-lg-demo { box-shadow: var(--shadow-lg); }

/* ---- 06 Voice & Tone ---- */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.voice-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--blue);
}
.voice-card.tone-dont { border-left-color: var(--coral); }
.voice-card.tone-do   { border-left-color: var(--green); }

.voice-card-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  display: block;
}
.voice-card.tone-do   .voice-card-label { color: var(--green-dark); }
.voice-card.tone-dont .voice-card-label { color: var(--coral); }

.voice-card-title { font-family: 'Bangers', cursive; font-weight: 700; font-size: 1.1rem; color: var(--text); margin-bottom: 0.5rem; }
.voice-card-body  { font-size: 0.92rem; line-height: 1.65; color: var(--text-light); }

.example-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

@media (max-width: 600px) { .example-pair { grid-template-columns: 1fr; } }

.example-box { border-radius: var(--radius-md); padding: 1.4rem; }
.example-box.good { background: rgba(76,175,80,0.08); border: 1px solid rgba(76,175,80,0.25); }
.example-box.bad  { background: rgba(245,130,90,0.08); border: 1px solid rgba(245,130,90,0.25); }

.example-box-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  display: block;
}
.example-box.good .example-box-label { color: var(--green-dark); }
.example-box.bad  .example-box-label { color: var(--coral); }

.example-box p { font-size: 0.92rem; line-height: 1.55; color: var(--text); font-style: italic; }

/* ---- 07 Icons ---- */
.icon-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.icon-tile {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.icon-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.icon-tile.dark-bg { background: var(--ink); }

.icon-tile-meta { text-align: center; }
.icon-tile-name { font-family: 'Bangers', cursive; font-weight: 700; font-size: 0.95rem; color: var(--text); display: block; margin-bottom: 0.2rem; }
.icon-tile.dark-bg .icon-tile-name { color: var(--white); }

.icon-tile-usage { font-family: 'Space Mono', monospace; font-size: 0.55rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue); display: block; }
.icon-tile.dark-bg .icon-tile-usage { color: var(--green); }

.icon-sizes {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 1.8rem 2rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}

.icon-size-item { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.icon-size-label { font-family: 'Space Mono', monospace; font-size: 0.58rem; color: var(--text-light); letter-spacing: 0.1em; }

/* ---- Colour swatch backgrounds — official 7-colour palette ---- */
.swatch-blue   { background: #00A8E8; }
.swatch-navy   { background: #005F80; }
.swatch-sand   { background: #F7D060; }
.swatch-coral  { background: #F5825A; }
.swatch-green  { background: #4CAF50; }
.swatch-cream  { background: #F8F6EC; border: 1px solid #ddd8cc; }
.swatch-ink    { background: #111111; }

/* ---- Gradient swatch backgrounds ---- */
.grad-swatch--hero   { background: var(--grad-hero); }
.grad-swatch--quotes { background: var(--grad-quotes); }
.grad-swatch--games  { background: var(--grad-games); }
.grad-swatch--amber  { background: var(--grad-amber); }
.grad-swatch--coral  { background: var(--grad-coral); }
.grad-swatch--sky    { background: var(--grad-sky); }
.grad-swatch--lime   { background: var(--grad-lime); }
.grad-swatch--pink   { background: var(--grad-pink); }
.grad-swatch--teal   { background: var(--grad-teal); }

/* ---- Card header gradient variants (showcase only) ---- */
.card-cocktail-header--coral { background: var(--grad-coral); }
.card-cocktail-header--sky   { background: var(--grad-sky); }

/* ---- Demo wrapper blocks ---- */
.sg-quote-dark-demo {
  background: var(--grad-quotes);
  border-radius: var(--radius-md);
  padding: 2rem;
  margin-bottom: 2.5rem;
}

.sg-game-dark-demo {
  background: var(--grad-games);
  border-radius: var(--radius-md);
  padding: 2rem;
}

.sg-ocean-pill-demo {
  background: var(--grad-quotes);
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* ---- Spacing block widths (demo) ---- */
.spacing-block--xs { width: 8px; }
.spacing-block--sm { width: 16px; }
.spacing-block--md { width: 32px; }
.spacing-block--lg { width: 56px; }
.spacing-block--xl { width: 80px; }

/* ---- Radius block demo shapes ---- */
.radius-block--sm   { border-radius: 8px; }
.radius-block--md   { border-radius: 16px; }
.radius-block--lg   { border-radius: 20px; }
.radius-block--pill { border-radius: 50px; width: 100px; }

/* ---- Margin utilities (style guide page only) ---- */
.sg-mt-xs  { margin-top: 0.5rem; }
.sg-mt-sm  { margin-top: 1.5rem; }
.sg-mt-md  { margin-top: 2rem; }
.sg-mt-lg  { margin-top: 2.5rem; }
.sg-mb-xs  { margin-bottom: 1rem; }
.sg-mb-sm  { margin-bottom: 1.5rem; }
.sg-mb-md  { margin-bottom: 2rem; }
.sg-mb-lg  { margin-bottom: 2.5rem; }

/* ---- Section tag: inline-flex for icon support ---- */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ---- Button with icon ---- */
.btn-with-icon { display: inline-flex; align-items: center; gap: 0.5rem; }

/* ---- SVG icon color utilities ---- */
.icon-blue        { color: var(--blue);        flex-shrink: 0; }
.icon-navy        { color: var(--navy);        flex-shrink: 0; }
.icon-sand        { color: var(--sand);        flex-shrink: 0; }
.icon-coral       { color: var(--coral);       flex-shrink: 0; }
.icon-green       { color: var(--green);       flex-shrink: 0; }
.icon-white       { color: var(--white);       flex-shrink: 0; }
.icon-ink         { color: var(--ink);         flex-shrink: 0; }
.icon-text        { color: var(--text);        flex-shrink: 0; }
/* legacy aliases for old markup */
.icon-amber       { color: var(--sand);        flex-shrink: 0; }
.icon-amber-light { color: var(--sand);        flex-shrink: 0; }
.icon-lime        { color: var(--green);       flex-shrink: 0; }
.icon-lime-dark   { color: var(--green-dark);  flex-shrink: 0; }
.icon-dark        { color: var(--ink);         flex-shrink: 0; }

/* ---- Typography prose classes (used in voice & icons intro text) ---- */
.sg-intro {
  font-size: 1.05rem;
  color: var(--text-light);
  font-style: italic;
  max-width: 640px;
  margin-bottom: 2.5rem;
}

.sg-body-emphasis {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.7;
}

/* ---- Inline code (inside prose paragraphs) ---- */
.sg-inline-code {
  font-family: 'Space Mono', monospace;
  font-size: 0.85em;
  background: rgba(0,0,0,0.06);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

/* ---- sg-note margin variant ---- */
.sg-note--mt { margin-top: 0.5rem; }

/* ---- 00 Logo ---- */
.logo-showcase {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-end;
}

.logo-tile {
  border-radius: var(--radius-md);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
}

.logo-tile--light { background: var(--white); }
.logo-tile--dark  { background: var(--ink); }
.logo-tile--wide  { flex: 1; min-width: 300px; }

.logo-preview--lg    { height: 200px; width: auto; object-fit: contain; }
.logo-preview--md    { height: 120px; width: auto; object-fit: contain; }
.logo-preview--sm    { height: 60px;  width: auto; object-fit: contain; }
.logo-preview--horiz { height: 80px;  width: auto; object-fit: contain; }

.logo-tile-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-light);
  text-align: center;
}

.logo-tile-label--dark { color: rgba(255,255,255,0.45); }

/* ---- Footer ---- */
.sg-footer {
  background: var(--ink);
  padding: 3rem 2rem;
  text-align: center;
  border-top: 2px solid rgba(76,175,80,0.15);
}

.sg-footer p {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
}

.sg-footer p span { color: var(--green); }