/*
 * File: apps/style/public/assets/guide.css
 * Purpose: Minimal layout helpers for the style app only (mobile-first).
 * Why: Keep HTML pages short; no utility framework required.
 *
 * HOW IT LOADS BRAND:
 * - We import tokens and global so these helpers inherit your brand variables and base components.
 * - fonts.css is optional; leave the import if your app serves it under /assets/fonts.css.
 *   If not, the stack falls back to system fonts via global.css.
 *
 * NOTE:
 * - This file intentionally does NOT redefine brand styles. Those live in @perditio/tokens and @perditio/css,
 *   which your server exposes as /assets/tokens.css and /assets/global.css.
 */

/* --- Brand inputs from packages served by server.mjs map -> packages/..../dist) --- */
@import url("/assets/tokens.css");  /* from @perditio/tokens build */
@import url("/assets/global.css");  /* from @perditio/css build */
/* Optional font-face declarations for the style app site only */
@import url("/assets/fonts.css");

/* --- Canvas sizing for the gallery pages (mobile-first) --- */
:root { --canvas-max: 1200px; }

/* Base: inherit brand colors/typography from global.css; keep app chrome simple */
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);           /* true-black from tokens */
  color: var(--text);              /* never black-on-black */
  font-family: var(--font-body, system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif);
}

/* Header: sticky app bar used across /style/* pages */
.header {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding: 14px 18px;
  /* Glass treatment matches the brand look without redefining it */
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(8px) saturate(120%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header__brand {
  font-family: var(--font-display);
  letter-spacing: 1px;
  font-size: 28px;
}
.header__nav a {
  color: var(--text);
  text-decoration: none;
  opacity: .85;
  margin-left: 14px;
}
.header__nav a:hover { opacity: 1; }

/* Page wrapper: keeps readable line-length while staying mobile-first */
.wrap { max-width: var(--canvas-max); margin: 0 auto; padding: 22px; }

/* Halo frame: subtle neon edge to draw attention to demo containers */
.halo { position: relative; border-radius: 18px; }
.halo::after {
  content: "";
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, var(--glow-a), var(--glow-b), var(--glow-c));
  opacity: .25; filter: blur(12px);
  animation: glowShift 16s linear infinite;  /* same hue-cycle as global.css */
}
@keyframes glowShift {
  0% { filter: blur(12px) hue-rotate(0deg); }
  100% { filter: blur(12px) hue-rotate(360deg); }
}

/* Simple responsive grid for the card gallery */
.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: 1fr; }
@media (min-width: 960px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }

/* Cards & demo frames: use light glass; do not reimplement .glass/.glow */
.card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 18px;
}
.demo-frame {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow: hidden;
  min-height: 160px;
}

/* Micro-typography helpers used in the style pages */
.kicker {
  text-transform: uppercase;
  font-size: 12px; letter-spacing: .12em;
  opacity: .72; margin-bottom: 8px;
}
.page-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5.6vw, 64px);
  letter-spacing: .5px;
  margin: 6px 0 10px;
}
.note { font-size: 13px; opacity: .8; }
.footer { opacity: .7; font-size: 13px; padding: 16px 0 24px; text-align: center; }

/* Small layout utilities used across examples (keep minimal) */
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.label { opacity: .7; font-size: 12px; }
.value { font-variant-numeric: tabular-nums; }

/* Buttons on the guide pages use brand .button styles from global.css.
   We only add hover/tweak here if needed; otherwise rely on system classes:
   - .button.glass.glow (from global.css) for primary CTAs in examples.
*/