/* Style-brief skin — maps the Oliizoi brand tokens (tokens.css) onto the
   design-system's semantic token names. Load AFTER styles.css and tokens.css.
   Palette, type triad and rhythm per STYLE-BRIEF.md; no new hues. */

:root {
  /* Page ground moves to Linen 50; Linen 100 becomes the warm secondary
     surface. Existing markup references --linen-cream for page grounds. */
  --linen-050: #faf8f5;
  --linen-100: #f4edde;

  --surface-page: var(--linen-50);
  --surface-raised: var(--linen-100);
  --surface-sunken: var(--linen-200);
  --surface-card: var(--linen-50);

  --text-body: var(--char-700);
  --text-heading: var(--char-700);
  --text-muted: var(--char-500);
  --text-subtle: var(--char-400);

  /* Rules, not boxes — 1px in Loam 300 */
  --border-hairline: color-mix(in srgb, var(--loam-300) 55%, transparent);
  --border-default: var(--loam-300);

  /* Client direction: pill buttons site-wide (overrides the kit's 2px control radius) */
  --radius-control: 999px;

  /* Type triad: serif display · grotesk body · mono labels */
  --font-serif: var(--ff-display);
  --font-sans: var(--ff-sans);
  --font-mono: var(--ff-mono);
}

body { background: var(--linen-50); }

/* Mobile nav: CSS-only hamburger via checkbox hack (no page-logic changes needed) */
.nav-toggle-input { display: none; }
.nav-toggle-label { display: none; cursor: pointer; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; }
.mobile-nav-panel { display: none; }

@media (max-width: 860px) {
  .desktop-nav-links { display: none !important; }
  .nav-toggle-label { display: inline-flex !important; }
  .dp-row { grid-template-columns: 1fr !important; }
  .dp-form { padding-left: 20px !important; padding-right: 20px !important; }
  .nav-toggle-input:checked ~ .mobile-nav-panel { display: flex !important; }

  /* Any inline grid layout collapses to a single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* Items meant to span multiple columns (e.g. a photo beside a card row) take the
     full row instead of an orphaned implicit half-column once the grid is 1-wide */
  [style*="grid-column: span"] { grid-column: 1 / -1 !important; min-height: 240px !important; }
  .offset-align { margin-top: 0 !important; }

  /* Large column gaps read as dead space once a grid stacks to one column */
  [style*="gap: 40px"], [style*="gap: 48px"], [style*="gap: 56px"],
  [style*="gap: 64px"], [style*="gap: 72px"] { gap: 24px !important; }

  /* Section content gutters shrink from 48px to 20px */
  [style*="var(--container-max)"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* 16px prevents iOS Safari's auto-zoom-on-focus, which otherwise makes the
     whole page (esp. popup forms) look zoomed in and overlapping after a tap */
  input, select, textarea { font-size: 16px !important; }

  body { overflow-x: hidden; }
}

@media (max-width: 520px) {
  [style*="var(--container-max)"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="font-size: 60px"], [style*="font-size: 50px"] { font-size: 34px !important; }
}