/* ==========================================================================
   DaySaw Agency — "High Desert Modern" design tokens (v1.0, Oct 2026)
   Shared by index.html (homepage layout) and brand.html (brand board).
   ========================================================================== */

/* Fonts: Cabinet Grotesk (display) + Satoshi (text) via Fontshare, JetBrains Mono via Google.
   For production, self-host the woff2 files with font-display: swap. */
@import url("https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@500,700,800&f[]=satoshi@400,500,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  /* ---- Color: core ---- */
  --basalt: #121614;        /* Ink. Headlines, primary text, dark buttons */
  --basalt-80: #2a302d;
  --stone: #535b56;         /* Body copy (6.3:1 on Pumice) */
  --lichen: #8a918c;        /* Muted meta text on dark only */
  --ash: #d9ddd6;           /* Hairlines, dividers, input borders */
  --pumice: #f2f3ef;        /* Page background (cool off-white) */
  --snow: #ffffff;          /* Raised surfaces, cards */
  --juniper: #1d3a31;       /* Deep brand surface: feature panels, final CTA */
  --juniper-90: #24463b;

  /* ---- Color: the one accent ---- */
  --daybreak: #ff5b24;      /* Sunrise orange. CTAs, stars, live dots. Basalt text on top. */
  --daybreak-soft: #ffe4d9; /* Tint for highlights / selected states */
  --daybreak-ink: #c73d0d;  /* Accent text on light backgrounds (4.6:1 on Pumice) */

  /* ---- Typography ---- */
  --font-display: "Cabinet Grotesk", "Satoshi", system-ui, sans-serif;
  --font-text: "Satoshi", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --fs-hero: clamp(2.75rem, 5.4vw, 4.75rem);
  --fs-h2: clamp(2rem, 3.6vw, 3.25rem);
  --fs-h3: clamp(1.375rem, 1.8vw, 1.625rem);
  --fs-lead: clamp(1.125rem, 1.3vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;

  /* ---- Shape (documented rule) ----
     Interactive controls = pill. Cards & panels = 20px. Inputs = 12px. Image frames = 14px. */
  --r-pill: 999px;
  --r-card: 20px;
  --r-input: 12px;
  --r-frame: 14px;

  /* ---- Spacing (4px base) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ---- Elevation (tinted to Basalt, never pure black) ---- */
  --shadow-1: 0 1px 2px rgb(18 22 20 / 0.06), 0 2px 8px rgb(18 22 20 / 0.05);
  --shadow-2: 0 2px 6px rgb(18 22 20 / 0.06), 0 18px 40px -12px rgb(18 22 20 / 0.18);
  --shadow-3: 0 30px 80px -20px rgb(18 22 20 / 0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 420ms;
  --dur-slow: 800ms;

  --maxw: 1240px;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--pumice);
  color: var(--basalt);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--daybreak); color: var(--basalt); }
:focus-visible { outline: 3px solid var(--daybreak); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }
.mono { font-family: var(--font-mono); }

/* ---- Buttons ---- */
.btn {
  --_bg: var(--basalt); --_fg: var(--pumice); --_bd: var(--basalt);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--_bd);
  background: var(--_bg); color: var(--_fg);
  font: 700 1rem/1 var(--font-text);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), box-shadow var(--dur-fast);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.btn i { font-size: 1.15em; }
.btn--accent { --_bg: var(--daybreak); --_fg: var(--basalt); --_bd: var(--daybreak); }
.btn--accent:hover { --_bg: #ff6d3b; }
.btn--ghost { --_bg: transparent; --_fg: var(--basalt); --_bd: var(--ash); }
.btn--ghost:hover { --_bd: var(--basalt); }
.btn--on-dark { --_bg: transparent; --_fg: var(--pumice); --_bd: rgb(242 243 239 / 0.3); }

/* ---- Small UI ---- */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--snow); border: 1px solid var(--ash);
  font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: 0.02em;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--daybreak);
  box-shadow: 0 0 0 0 rgb(255 91 36 / 0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: pulse 2.2s var(--ease-out) infinite; }
  @keyframes pulse { 70% { box-shadow: 0 0 0 8px rgb(255 91 36 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 91 36 / 0); } }
}

/* ---- Scroll reveal (progressive enhancement; no-JS & reduced-motion = visible) ---- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}