/* ============================================================================
   lmp.css — LowerMyPGE design system (single source of truth)
   Site lift T-0132 · Wave 0 · created 2026-08-17

   ONE stylesheet the whole estate links. Tokens + components extracted from the
   front-door funnel system (outage-token family: navy / sky / gold / amber,
   Intro Rust display + Figtree body, self-hosted).

   THE LOGO IS A SLOT. The wordmark renders from CSS today; when the mark locks
   out of the Canva session it drops into --lmp-mark-url (one line) and every
   page that links this file inherits it. No page is touched twice.

   House law: .claude/skills/lmp-design-house-rules — NEVER green; density is a
   feature on operator surfaces; wiring travels, skin changes.
   ============================================================================ */

/* ── Self-hosted brand fonts (same files the live outage page serves) ── */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url("/assets/outage/fonts/Figtree-Variable.woff2") format("woff2")}
@font-face{font-family:'Figtree';font-style:italic;font-weight:300 900;font-display:swap;src:url("/assets/outage/fonts/Figtree-Italic-Variable.woff2") format("woff2")}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/outage/fonts/DMSerifDisplay-Regular.woff2") format("woff2")}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url("/assets/outage/fonts/DMSerifDisplay-Italic.woff2") format("woff2")}
@font-face{font-family:'Intro Rust';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/outage/fonts/IntroRust-Base.otf") format("opentype")}

:root{
  /* ── Brand scale ── */
  --navy-900:#041727; --navy-700:#0a2740; --navy-500:#16405f;
  --sky-300:#7fd0f0; --sky-400:#5ec4ec; --sky-500:#38b3e5; --sky-600:#1e97c8; --sky-700:#12729a;
  --amber-300:#ffd285; --amber-400:#ffbd4f; --amber-500:#e8a437; --gold-500:#d3aa57;
  --mist-100:#edf7f9; --mist-200:#dceef3;
  --paper:#f7f8f5;

  /* ── Semantic aliases (prefer these in page code) ── */
  --ink:var(--navy-900);
  --text-secondary:#3d5567;
  --surface:#ffffff;
  --surface-soft:var(--mist-100);
  --border:var(--mist-200);
  --link:var(--sky-600);
  --link-hover:var(--sky-700);
  --accent:var(--amber-400);
  --color-danger:#c94f3d;   /* the ONE red — always paired with a shape/label, never color-alone */

  /* ── Type ── */
  --font-display:'Intro Rust','DM Serif Display',Georgia,serif;
  --font-serif:'DM Serif Display',Georgia,serif;
  --font-sans:'Figtree',-apple-system,'Segoe UI',system-ui,sans-serif;

  /* ── Radii / shadow / motion ── */
  --radius-sm:8px; --radius-md:16px; --radius-lg:28px; --radius-pill:999px;
  --shadow-sm:0 2px 8px rgba(4,23,39,.12);
  --shadow-md:0 8px 30px rgba(4,23,39,.18);
  --shadow-text:0 2px 6px rgba(4,23,39,.28);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --t-press:120ms; --t-ui:200ms; --t-reveal:600ms;

  /* ── Logo slot: empty today, one line when the mark locks ── */
  --lmp-mark-url:none;   /* e.g. url("/assets/brand/lmp-mark.svg") */
}

/* ── Base ── */
.lmp{font-family:var(--font-sans);color:var(--ink);-webkit-font-smoothing:antialiased}
.lmp *,.lmp *::before,.lmp *::after{box-sizing:border-box}
/* Link color applies to real links only — never buttons. Without :not(.lmp-btn)
   this rule out-specifies .lmp-btn--* text color and paints button labels link-blue
   (jarring washed text on amber CTAs). */
.lmp a:not(.lmp-btn){color:var(--link);text-decoration:none}
.lmp a:not(.lmp-btn):hover{color:var(--link-hover)}
.lmp img{max-width:100%}
.lmp :focus-visible{outline:3px solid var(--sky-500);outline-offset:2px;border-radius:4px}
.lmp ::selection{background:var(--sky-300);color:var(--navy-900)}
.lmp input,.lmp textarea{caret-color:var(--sky-600)}

/* ── Headings ── */
.lmp h1,.lmp h2,.lmp h3{font-family:var(--font-display);font-weight:400;letter-spacing:.01em;text-wrap:balance;margin:0}
.lmp h1{font-size:clamp(31px,4.4vw,54px);line-height:1.08}
.lmp h2{font-size:clamp(24px,3.4vw,40px);line-height:1.14}
.lmp h3{font-size:1.5rem;line-height:1.2}
.lmp p{line-height:1.6;color:var(--text-secondary);margin:0}

/* ── Eyebrow / kicker (uppercase label) ── */
.lmp-kicker{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sky-600)}

/* ── Logo lockup (wordmark now, mark slots in later) ── */
.lmp-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.lmp-logo__mark{width:42px;height:42px;flex:none;border-radius:14px;background:var(--navy-700);
  background-image:var(--lmp-mark-url);background-size:cover;background-position:center}
.lmp-logo__word{font-family:var(--font-display);font-size:19px;letter-spacing:.02em;line-height:1;color:var(--navy-900)}
.lmp-logo__word b{color:var(--sky-500);font-weight:400}
.lmp-logo__tag{display:block;font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-500);margin-top:5px}
.lmp-logo--on-dark .lmp-logo__word{color:#fff}
.lmp-logo--on-dark .lmp-logo__tag{color:var(--amber-300)}
.lmp-logo--on-dark .lmp-logo__mark{background-color:rgba(255,255,255,.06)}

/* ── Buttons ── */
.lmp-btn{font-family:var(--font-sans);font-weight:700;cursor:pointer;border-radius:var(--radius-pill);
  border:2px solid var(--navy-900);color:#fff;background:var(--navy-900);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2;
  padding:12px 26px;font-size:16px;text-align:center;text-decoration:none;
  transition:transform var(--t-press) var(--ease-out),background-color var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out)}
.lmp-btn:active{transform:scale(.97)}
.lmp-btn--lg{padding:15px 34px;font-size:18px}
.lmp-btn--sm{padding:7px 18px;font-size:14px}
.lmp-btn--sky{background:var(--sky-500);border-color:var(--sky-500);color:var(--navy-900)}
.lmp-btn--accent{background:var(--amber-400);border-color:var(--amber-400);color:var(--navy-900)}
.lmp-btn--outline{background:transparent;border-color:var(--navy-900);color:var(--navy-900)}
@media(hover:hover) and (pointer:fine){
  .lmp-btn:hover{background:var(--navy-700);border-color:var(--navy-700)}
  .lmp-btn--sky:hover{background:var(--sky-400);border-color:var(--sky-400);color:var(--navy-900)}
  .lmp-btn--accent:hover{background:var(--amber-300);border-color:var(--amber-300);color:var(--navy-900)}
  .lmp-btn--outline:hover{background:var(--mist-100)}
}
.lmp-btn[disabled]{opacity:.45;cursor:default;transform:none}

/* ── Card ── */
.lmp-card{font-family:var(--font-sans);border-radius:var(--radius-lg);padding:24px;background:var(--surface);border:2px solid var(--border);color:var(--ink)}
.lmp-card--soft{background:var(--surface-soft);border-color:transparent}
.lmp-card--dark{background:var(--navy-900);border-color:rgba(255,255,255,.14);color:#fff}
.lmp-card--dark p{color:var(--mist-200)}

/* ── Badge / pill ── */
.lmp-badge{font-family:var(--font-sans);font-weight:800;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;gap:6px;line-height:1.3}
.lmp-badge--accent{background:var(--amber-400);color:var(--navy-900)}
.lmp-badge--sky{background:rgba(56,179,229,.14);color:var(--sky-700)}
.lmp-badge--danger{background:rgba(201,79,61,.12);color:var(--color-danger)}

/* ── Field / form ── */
.lmp-field{display:flex;flex-direction:column;gap:6px}
.lmp-field__label{font-weight:700;font-size:13.5px;color:var(--ink)}
.lmp-field input,.lmp-field textarea{font-family:var(--font-sans);font-size:16px;color:var(--ink);background:var(--surface);
  border:2px solid var(--border);border-radius:var(--radius-md);padding:11px 14px;outline:none;width:100%;
  transition:border-color var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out)}
.lmp-field input:focus,.lmp-field textarea:focus{border-color:var(--sky-500);box-shadow:0 0 0 3px rgba(56,179,229,.25)}

/* ── Stat (marketable number) ── */
.lmp-stat__value{font-family:var(--font-display);font-size:34px;color:var(--navy-900);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.lmp-stat__value--gold{color:var(--gold-500)}
.lmp-stat__label{font-size:11.5px;color:var(--text-secondary);font-weight:600;margin-top:6px;line-height:1.4}

/* ── Header / footer chrome ── */
.lmp-header{background:var(--navy-900);padding:14px 48px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:sticky;top:0;z-index:900;box-shadow:0 2px 18px rgba(4,23,39,.35)}
.lmp-nav{display:flex;gap:26px;align-items:center;font-weight:600;font-size:15px}
.lmp-nav a:not(.lmp-btn){color:#fff;transition:color var(--t-ui) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.lmp-nav a:not(.lmp-btn):hover{color:var(--sky-300)}}
.lmp-footer{background:var(--navy-900);padding:44px 48px;display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.lmp-footer .meta{color:var(--mist-200);font-size:13px;font-weight:600;letter-spacing:.04em}
.lmp-footer .fine{color:#7e94a4;font-size:11px;max-width:660px;line-height:1.6}

/* ── Section rhythm ── */
.lmp-section{padding:88px 48px}
.lmp-section__inner{max-width:1080px;margin:0 auto}
.lmp-section--dark{background:var(--navy-900);color:#fff}
.lmp-section--mist{background:var(--mist-100)}
@media(max-width:960px){
  .lmp-header,.lmp-footer{padding-left:20px;padding-right:20px}
  .lmp-section{padding:64px 20px}
}

/* ── Reveal-on-scroll utility (opt-in; JS adds .is-in) ── */
.lmp-reveal{opacity:0;transform:translateY(16px);transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out)}
.lmp-reveal.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .lmp *{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .lmp-reveal{opacity:1;transform:none}
}