/* ============================================================
   StoreLink shared design tokens — paper grain, Fraunces/Inter,
   jade/gold/brick palette. Include on any standalone page via:
     <link rel="stylesheet" href="/storelink-theme.css">
   Then add class="sl-page" to <body> to get the grain background.
   Only generic, sl-prefixed rules live here — page-specific classes
   (.card, .icon, .btn, .step, etc.) stay in each page's own <style>
   so nothing here can collide with existing markup or scripts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --sl-bg:#F1ECDF; --sl-bg-soft:#E9E2D0; --sl-ink:#221E19; --sl-ink-soft:#726A5D; --sl-ink-faint:#9C9384;
  --sl-surface:#FBF8F0; --sl-surface-2:#F3EDDF; --sl-line:rgba(34,30,25,0.12);
  --sl-accent:#1F6F5C; --sl-accent-soft:#DCEAE3; --sl-gold:#C4882A; --sl-gold-soft:#F4E4C2;
  --sl-brick:#AD3A2E; --sl-brick-soft:#F3DAD5; --sl-stamp-ink:#FBF3E3;
  --sl-shadow:rgba(40,32,20,0.22);
}
@media (prefers-color-scheme: dark){
  :root{
    --sl-bg:#17181A; --sl-bg-soft:#1E2022; --sl-ink:#ECE7DA; --sl-ink-soft:#B2AA9C; --sl-ink-faint:#726C61;
    --sl-surface:#211F1C; --sl-surface-2:#292623; --sl-line:rgba(236,231,218,0.12);
    --sl-accent:#49B08D; --sl-accent-soft:#1D362F; --sl-gold:#E3A94B; --sl-gold-soft:#3A2E17;
    --sl-brick:#E2685A; --sl-brick-soft:#3B211D; --sl-stamp-ink:#FBF3E3;
    --sl-shadow:rgba(0,0,0,0.5);
  }
}

body.sl-page{
  font-family:'Inter',-apple-system,sans-serif; color:var(--sl-ink); background:var(--sl-bg);
  min-height:100vh; margin:0; position:relative;
}
.sl-serif{ font-family:'Fraunces',serif; }

/* paper grain + soft highlight, fixed full-bleed, purely decorative */
body.sl-page::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@media (prefers-color-scheme: dark){ body.sl-page::before{ mix-blend-mode:overlay; opacity:.7; } }
body.sl-page::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; mix-blend-mode:soft-light;
  background:radial-gradient(120% 70% at 18% -6%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%),
              radial-gradient(90% 60% at 100% 110%, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 50%);
}
@media (prefers-color-scheme: dark){
  body.sl-page::after{
    background:radial-gradient(120% 70% at 18% -6%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 45%),
               radial-gradient(90% 60% at 100% 110%, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 50%);
  }
}

/* generic helpers — only used by NEW markup added during the reskin;
   every page's own pre-existing classes (.card/.icon/.btn/.step etc.)
   are restyled in that page's own <style> block instead, so nothing
   here can collide with markup a script generates dynamically. */
.sl-wrap-center{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; box-sizing:border-box; }

.sl-notice{ position:relative; z-index:1; background:var(--sl-gold-soft); border:1px solid var(--sl-gold); border-radius:12px;
  padding:16px 20px; font-size:14px; color:var(--sl-ink); margin-bottom:32px; }
.sl-notice strong{ color:var(--sl-ink); }

.sl-back{ position:relative; z-index:1; display:inline-block; margin-bottom:24px; font-size:13px; color:var(--sl-ink-soft); text-decoration:none; }
.sl-back:hover{ color:var(--sl-ink); }

.sl-doc-wrap{ position:relative; z-index:1; max-width:760px; margin:0 auto; padding:48px 24px 80px; line-height:1.7; }
.sl-doc-wrap h1{ font-family:'Fraunces',serif; font-size:30px; margin-bottom:4px; font-weight:600; }
.sl-doc-wrap .sl-updated{ color:var(--sl-ink-faint); font-size:13px; margin-bottom:32px; }
.sl-doc-wrap h2{ font-family:'Fraunces',serif; font-size:18px; margin-top:36px; margin-bottom:10px; font-weight:600; }
.sl-doc-wrap p, .sl-doc-wrap li{ color:var(--sl-ink-soft); font-size:14.5px; }
.sl-doc-wrap a{ color:var(--sl-accent); }
.sl-doc-wrap table{ width:100%; border-collapse:collapse; margin-top:12px; font-size:13.5px; }
.sl-doc-wrap th,.sl-doc-wrap td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--sl-line); color:var(--sl-ink-soft); }
.sl-doc-wrap th{ color:var(--sl-ink); }
.sl-doc-wrap code{ background:var(--sl-surface-2); padding:1px 5px; border-radius:5px; font-size:12.5px; }
