/* ============================================================
   ThePuff.co — Colors & Type
   Airy. Breezy. Sun-warmed. A puff of Moroccan light.
   ============================================================ */

/* ---------- Webfonts ---------- */
/* Display: Fraunces — soft, optical, personality without being heavy.
   Body: Instrument Sans — neutral, airy, legible.
   Script accent: Caveat — handwritten little notes, used sparingly.
   Mono: JetBrains Mono — for code/data only. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Caveat:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     COLOR — base palette
     ============================================================ */

  /* Pinks — the soul of the brand. Dusty, sun-bleached rose. */
  --puff-rose-50:   #FDF6F2;  /* breath of pink — page bg */
  --puff-rose-100:  #FBEAE1;  /* powder */
  --puff-rose-200:  #F6D2C2;  /* peach blush */
  --puff-rose-300:  #EFB39C;  /* coral cream */
  --puff-rose-400:  #E89077;  /* soft terracotta */
  --puff-rose-500:  #D86A52;  /* terracotta — primary accent */
  --puff-rose-600:  #B7503D;  /* riad wall */
  --puff-rose-700:  #8E3A2C;  /* deep tile clay */
  --puff-rose-800:  #5C2419;

  /* Sky — clouds, breeze, airiness. */
  --puff-sky-50:    #F4F8FB;
  --puff-sky-100:   #E6EFF6;
  --puff-sky-200:   #CFE0EC;
  --puff-sky-300:   #A9C7DA;
  --puff-sky-400:   #7BA8C2;  /* hazy afternoon sky */

  /* Sand / cream — neutrals warmed by sun, never cold gray. */
  --puff-sand-50:   #FBF7F1;
  --puff-sand-100:  #F4ECE0;
  --puff-sand-200:  #E8DCC9;
  --puff-sand-300:  #D4C2A6;
  --puff-sand-400:  #B19A78;
  --puff-sand-500:  #8A7556;

  /* Tile-green — the deep zellige accent. Used sparingly. */
  --puff-tile-100:  #D9E3D5;
  --puff-tile-300:  #7C9E7E;
  --puff-tile-500:  #3F6B57;  /* zellige pool */
  --puff-tile-700:  #234037;

  /* Ochre — sunlight on stone. Reserved for highlights. */
  --puff-ochre-300: #F2C77A;
  --puff-ochre-500: #D89A3B;

  /* Ink — never pure black. Warm, dusk-stained. */
  --puff-ink-900:   #2A1F1A;  /* deepest readable text */
  --puff-ink-700:   #4A3A33;
  --puff-ink-500:   #7A6A62;
  --puff-ink-300:   #B5A89F;

  /* Pure white reserved for cards floating on tinted bg. */
  --puff-white:     #FFFFFF;
  --puff-cream:     #FFFAF3;

  /* ============================================================
     COLOR — semantic
     ============================================================ */
  --bg-page:        var(--puff-rose-50);
  --bg-elevated:    var(--puff-cream);
  --bg-tinted:      var(--puff-rose-100);
  --bg-inverse:     var(--puff-ink-900);

  --fg-1:           var(--puff-ink-900);  /* primary text */
  --fg-2:           var(--puff-ink-700);  /* secondary text */
  --fg-3:           var(--puff-ink-500);  /* muted, captions */
  --fg-4:           var(--puff-ink-300);  /* placeholder, hints */
  --fg-on-accent:   var(--puff-cream);

  --accent:         var(--puff-rose-500);
  --accent-hover:   var(--puff-rose-600);
  --accent-soft:    var(--puff-rose-200);
  --accent-tile:    var(--puff-tile-500);
  --accent-sun:     var(--puff-ochre-500);

  --border-soft:    rgba(42, 31, 26, 0.08);
  --border-medium:  rgba(42, 31, 26, 0.16);
  --border-strong:  rgba(42, 31, 26, 0.32);

  --status-success: var(--puff-tile-500);
  --status-warning: var(--puff-ochre-500);
  --status-danger:  var(--puff-rose-700);
  --status-info:    var(--puff-sky-400);

  /* ============================================================
     TYPE — font families
     ============================================================ */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --font-script:  'Caveat', 'Snell Roundhand', cursive;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============================================================
     TYPE — scale (modular, 1.25 ratio, tuned)
     ============================================================ */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;
  --text-6xl:  128px;

  /* Line heights — generous, breezy. */
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.14em;

  /* ============================================================
     RADIUS — soft, never sharp
     ============================================================ */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  36px;
  --radius-pill: 999px;
  --radius-arch: 50% 50% 12px 12px / 60% 60% 12px 12px; /* moroccan arch */

  /* ============================================================
     SPACING — 4px base, named for use
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ============================================================
     SHADOW — soft, cloudlike, warm-tinted (never neutral gray)
     ============================================================ */
  --shadow-puff-sm: 0 1px 2px rgba(142, 58, 44, 0.06),
                    0 2px 8px rgba(142, 58, 44, 0.04);
  --shadow-puff-md: 0 2px 4px rgba(142, 58, 44, 0.06),
                    0 8px 24px rgba(142, 58, 44, 0.08);
  --shadow-puff-lg: 0 4px 12px rgba(142, 58, 44, 0.08),
                    0 24px 60px rgba(142, 58, 44, 0.12);
  --shadow-puff-xl: 0 8px 24px rgba(142, 58, 44, 0.10),
                    0 40px 100px rgba(142, 58, 44, 0.16);
  --shadow-inset:   inset 0 1px 2px rgba(42, 31, 26, 0.06);

  /* ============================================================
     MOTION — gentle, breeze-like
     ============================================================ */
  --ease-puff:    cubic-bezier(0.22, 1, 0.36, 1);   /* settle */
  --ease-breeze:  cubic-bezier(0.4, 0, 0.2, 1);     /* drift */
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle pop */
  --duration-fast:    140ms;
  --duration-normal:  240ms;
  --duration-slow:    420ms;
  --duration-drift:   800ms;
}

/* ============================================================
   SEMANTIC TYPE — drop in via class
   ============================================================ */
html, body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  text-wrap: balance;
}
.h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "opsz" 96, "SOFT" 80;
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-variation-settings: "opsz" 72, "SOFT" 60;
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
.h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-3);
}
.lede {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  font-weight: 400;
  text-wrap: pretty;
  max-width: 62ch;
}
p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}
.caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}
.tiny {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}
.script {
  font-family: var(--font-script);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--accent);
  font-weight: 500;
}
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-tinted);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
  color: var(--puff-rose-700);
}

/* Alpine.js: hide [x-cloak] elements until Alpine has initialized so we don't
   flash unbound expressions (e.g. {{ x }}) or pre-x-show content on first paint.
   Pages using Alpine put `x-cloak` on the root x-data element. */
[x-cloak] { display: none !important; }

/* ============================================================
   Glass — translucent cream chrome over the warm-gradient bg.
   Used by sticky pill nav and the range-tab toggle.
   ============================================================ */
:root {
  --bg-glass:        rgba(255, 250, 243, 0.78);
  --bg-glass-subtle: rgba(255, 250, 243, 0.6);
}

/* ============================================================
   Page chrome — the pill topnav + brand mark + nav links.
   Used by index.html, status.html, settings.html, and any
   future page. Don't reimplement these in a per-page <style>.
   ============================================================ */
.topnav {
  position: sticky; top: var(--space-4); z-index: 50;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 18px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-puff-sm);
}
.topnav .spacer { flex: 1; }
.topnav .nav-link {
  font: inherit; font-size: var(--text-sm); color: var(--fg-2);
  text-decoration: none; padding: 6px var(--space-3);
  background: transparent; border: 0; border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-puff),
              color var(--duration-fast) var(--ease-puff);
}
.topnav .nav-link:hover { background: var(--bg-tinted); color: var(--fg-1); }

.brand {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-decoration: none;
}
.brand .mark { width: 28px; height: 28px; flex-shrink: 0; }
.brand .dot,
h1 .dot, h2 .dot, h3 .dot { color: var(--accent); }

/* ============================================================
   Status indicators — pill chips and banner row. Three states:
   .up (zellige), .down (terracotta), .unknown (warm sand).
   Markup: `<span class="pill up">UP</span>` or
           `<div class="status-banner up">…</div>`.
   ============================================================ */
.pill {
  font-size: var(--text-xs); font-weight: 500;
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.pill.up,      .status-banner.up      { background: var(--puff-tile-100); color: var(--puff-tile-700); }
.pill.down,    .status-banner.down    { background: var(--accent-soft);   color: var(--puff-rose-700); }
.pill.unknown, .status-banner.unknown { background: var(--puff-sand-100); color: var(--fg-2); }

.status-banner {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  box-shadow: var(--shadow-puff-sm);
  transition: background var(--duration-normal) var(--ease-puff);
}
.status-banner .dot { width: 12px; height: 12px; border-radius: var(--radius-pill); flex-shrink: 0; }
.status-banner.up .dot      { background: var(--status-success); }
.status-banner.down .dot    { background: var(--status-danger); animation: status-pulse 1.6s var(--ease-breeze) infinite; }
.status-banner.unknown .dot { background: var(--puff-sand-400); }
@keyframes status-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }

/* ============================================================
   Pill toggle — `<div class="pill-tabs">` wrapping `<button>`s
   with `aria-selected="true"` on the active one.
   ============================================================ */
.pill-tabs {
  display: flex; gap: var(--space-1);
  background: var(--bg-glass-subtle);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: var(--space-1);
  width: max-content;
}
.pill-tabs button {
  appearance: none; border: 0; background: transparent;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font: inherit; font-size: var(--text-sm); color: var(--fg-2);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-puff),
              color var(--duration-fast) var(--ease-puff);
}
.pill-tabs button[aria-selected="true"] { background: var(--bg-inverse); color: var(--fg-on-accent); }

/* ============================================================
   Card — soft elevated surface on the warm page bg.
   Used by status monitor rows and settings sections.
   ============================================================ */
.card {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-puff-sm);
}
.card.hover-lift { transition: box-shadow var(--duration-slow) var(--ease-puff); }
.card.hover-lift:hover { box-shadow: var(--shadow-puff-md); }
.card h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  font-variation-settings: 'opsz' 60, 'SOFT' 60;
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-1);
}
.card .desc { color: var(--fg-2); font-size: var(--text-sm); margin: 0 0 var(--space-4); line-height: var(--leading-relaxed); }