/* ==========================================================================
   FontPairs — design system & layout
   ========================================================================== */

:root{
  --bg:#FBF9F5; --surface:#FFFFFF; --surface-2:#F3EFE8;
  --ink:#1C1B19; --ink-2:#5C5850; --line:#E7E1D7;
  --accent:#B3541E; --accent-ink:#8A3F14;
  --radius:16px; --radius-s:10px;
  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --maxw:1200px;
  --shadow:0 1px 2px rgba(28,27,25,.05),0 8px 24px rgba(28,27,25,.04);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-ui);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;font-weight:700}
h1{font-family:var(--font-display);font-size:clamp(1.9rem,4.4vw,3.1rem);letter-spacing:-.01em}
h2{font-family:var(--font-display);font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.01em}
h3{font-size:1.1rem}
p{margin:0 0 1em}
a{color:var(--accent);text-decoration-thickness:.08em;text-underline-offset:.14em}
a:hover{color:var(--accent-ink)}
ul{margin:0;padding:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);
  padding:.6rem 1rem;border-radius:0 0 var(--radius-s) 0;z-index:200;
}
.skip-link:focus{left:0;color:#fff}

/* Buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  border:1px solid transparent;border-radius:var(--radius-s);
  padding:.65rem 1.1rem;font:600 .95rem/1 var(--font-ui);cursor:pointer;
  text-decoration:none;transition:background .18s,transform .12s,box-shadow .18s,color .18s;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-ink);color:#fff}
.btn--secondary{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow)}
.btn--secondary:hover{border-color:var(--ink-2);color:var(--accent-ink)}
.btn--ghost{background:transparent;color:var(--accent-ink);border-color:transparent}
.btn--ghost:hover{background:var(--surface-2);color:var(--accent-ink)}

/* Header & nav ---------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(251,249,245,.9);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.site-header__inner{display:flex;align-items:center;gap:1.25rem;padding-block:.7rem;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;color:var(--ink);font-family:var(--font-display);font-size:1.35rem;font-weight:700}
.brand small{font-family:var(--font-ui);font-size:.72rem;color:var(--ink-2);font-weight:400;font-style:italic}
.brand:hover{color:var(--accent-ink)}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:.15rem;list-style:none;flex-wrap:wrap}
.site-nav a{
  display:inline-block;padding:.5rem .8rem;border-radius:var(--radius-s);
  color:var(--ink-2);text-decoration:none;font-weight:500;font-size:.95rem;
}
.site-nav a:hover{color:var(--accent-ink);background:var(--surface-2)}
.site-nav a.is-active{color:var(--accent-ink);background:var(--surface-2)}
.site-nav a.is-active:hover{color:var(--accent-ink)}

/* Hero ------------------------------------------------------------------ */
.hero{padding:clamp(2.5rem,7vw,5rem) 0 clamp(1.5rem,4vw,3rem);text-align:center}
.hero h1{margin-bottom:.4em}
.hero .lead{font-size:clamp(1.02rem,2vw,1.22rem);color:var(--ink-2);max-width:58ch;margin:0 auto 1.6em}
.hero__actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* Section scaffolding --------------------------------------------------- */
.section{padding-block:clamp(1.8rem,4vw,3rem)}
.section__head{max-width:70ch;margin-bottom:1.4rem}
.section__head h2{margin-bottom:.3em}
.section__head .sub{color:var(--ink-2);margin:0}

/* Hero live demo banner ------------------------------------------------- */
.hero-demo{
  margin:2rem auto 0;max-width:860px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.hero-demo__canvas{padding:clamp(1.6rem,5vw,3rem) clamp(1.4rem,5vw,3.2rem);text-align:left;min-height:220px;display:flex;flex-direction:column;justify-content:center}
.hero-demo__bar{display:flex;align-items:center;gap:.5rem;padding:.55rem 1rem;background:var(--surface-2);border-top:1px solid var(--line);flex-wrap:wrap}
.hero-demo__bar label{font-size:.78rem;color:var(--ink-2);font-weight:600}
.hero-demo__bar input{
  flex:1 1 220px;min-width:0;border:1px solid var(--line);border-radius:8px;
  padding:.45rem .7rem;font:500 .95rem var(--font-ui);background:var(--surface);color:var(--ink);
}
.hero-demo__bar input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}

/* Cards grid ------------------------------------------------------------ */
.cards-grid{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2.4vw,1.5rem)}
@media (min-width:640px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.cards-grid{grid-template-columns:repeat(3,1fr)}}

/* Card ------------------------------------------------------------------ */
.fp-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .18s,box-shadow .18s,transform .12s;
}
.fp-card:hover{border-color:#d8d0c2;box-shadow:0 2px 4px rgba(28,27,25,.06),0 14px 32px rgba(28,27,25,.07)}
.fp-card__preview{
  position:relative;background:var(--surface);border-bottom:1px solid var(--line);
  padding:clamp(1.5rem,4vw,2.2rem);min-height:230px;display:flex;flex-direction:column;justify-content:center;gap:.5rem;
}
.fp-card__new{
  position:absolute;top:.8rem;right:.8rem;background:var(--accent);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.25rem .6rem;border-radius:999px;
}
.fp-card__heading{font-size:clamp(1.4rem,3vw,1.8rem);font-weight:700;line-height:1.12;color:var(--ink)}
.fp-card__body{font-size:.95rem;color:var(--ink-2);line-height:1.5}
.fp-card__meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line)}
.fp-card__names{font-weight:600;color:var(--ink)}
.fp-card__names b{color:var(--accent);font-weight:600}
.fp-card__type{font-size:.76rem;color:var(--ink-2);background:var(--surface-2);border-radius:999px;padding:.2rem .6rem;white-space:nowrap}
.fp-card__actions{display:flex;gap:.35rem;padding:.7rem .8rem;background:var(--surface)}
.fp-card__actions .btn,.fp-card__actions button,.fp-card__actions a{
  flex:1;justify-content:center;font-size:.82rem;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  border-radius:var(--radius-s);padding:.5rem .4rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.3rem;
  transition:border-color .15s,color .15s,background .15s;
}
.fp-card__actions button:hover,.fp-card__actions a:hover{color:var(--accent-ink);border-color:var(--ink-2)}
.fp-card__actions [data-action="fav"]{max-width:44px;font-size:1rem}
.fp-card__actions [data-action="fav"][aria-pressed="true"]{background:var(--surface-2);border-color:var(--accent);color:var(--accent)}
.fp-card__actions [data-action="gfonts"]{color:var(--accent-ink)}
.fp-card__actions [data-action="gfonts"]:hover{border-color:var(--accent)}

/* Detail page ----------------------------------------------------------- */
.crumbs{font-size:.82rem;color:var(--ink-2);margin:1.2rem 0 .6rem}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--accent-ink);text-decoration:underline}
.crumbs .sep{margin-inline:.3rem;color:var(--line);border:0}
.detail-hero{padding:1rem 0 2rem;max-width:820px}
.detail-hero .kicker{font-family:var(--font-display);font-style:italic;color:var(--accent-ink);font-size:1.02rem}
.detail-panel{display:grid;gap:clamp(1rem,3vw,1.75rem);margin-block:1.5rem 3rem}
@media (min-width:900px){.detail-panel{grid-template-columns:1.6fr 1fr;align-items:start}}
.detail-panel .col{min-width:0}
.detail-playground{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.detail-aside{position:sticky;top:76px;display:flex;flex-direction:column;gap:1.25rem}
.panel-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem}
.panel-card h3{margin-top:0;font-family:var(--font-display)}
.chip{display:inline-block;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.2rem .7rem;font-size:.82rem;margin:0 .3rem .3rem 0;color:var(--ink)}
.panel-card ul,.prose ul{padding-left:1.1rem}
.panel-card li,.prose li{margin-bottom:.45em}
.fw-row{display:flex;gap:.8rem;flex-wrap:wrap}
.fw-row .fw{flex:1;min-width:170px;background:var(--surface-2);border-radius:var(--radius-s);padding:.7rem .9rem}
.fw-row .fw small{display:block;color:var(--ink-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.fw-row .fw strong{font-size:1.05rem}
.gf-link-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.codeblock{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:.8rem .9rem;font-family:'SFMono-Regular',Consolas,'Courier New',monospace;font-size:.8rem;word-break:break-all;margin:.6rem 0}
/* Similar pairings row */
.similar-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:640px){.similar-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.similar-grid{grid-template-columns:repeat(4,1fr)}}

/* Playground (detail pages) --------------------------------------------- */
.playground{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;margin-top:.4rem;
}
.playground__preview{
  padding:clamp(1.8rem,5vw,3rem);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;gap:.6rem;min-height:300px;
  transition:text-align .15s;
}
.pg-h{font-weight:700;line-height:1.2;color:var(--ink)}
.pg-b{color:var(--ink-2);line-height:1.6}
.playground__controls{
  background:var(--surface-2);padding:1.1rem 1.2rem;
  display:grid;grid-template-columns:1fr;gap:.85rem 1.3rem;
}
@media (min-width:560px){.playground__controls{grid-template-columns:repeat(2,1fr)}}
.playground__controls>label,
.playground__controls fieldset{
  display:flex;flex-direction:column;gap:.35rem;margin:0;padding:0;border:0;
  font-size:.72rem;color:var(--ink-2);font-weight:600;
}
.playground__controls input[type="text"]{
  font:500 .95rem var(--font-ui);border:1px solid var(--line);border-radius:8px;
  padding:.5rem .7rem;background:var(--surface);color:var(--ink);min-width:0;
}
.playground__controls input[type="text"]:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:0}
.playground__controls input[type="range"]{accent-color:var(--accent);cursor:pointer;min-width:0}
.playground__controls output{font-size:.78rem;color:var(--ink);font-weight:600}
.pg-radio-row{display:flex;flex-wrap:wrap;gap:.4rem}
.pg-radio-row label{
  display:inline-flex;align-items:center;gap:.35rem;margin:0;
  font-size:.8rem;font-weight:500;color:var(--ink-2);
  border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:.3rem .75rem;cursor:pointer;
}
.pg-radio-row input{margin:0;accent-color:var(--accent)}
.pg-radio-row label:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff}
.playground__controls fieldset legend{font-size:.72rem;color:var(--ink-2);font-weight:600}
.playground__swatches{
  grid-column:1/-1;display:flex;flex-direction:column;gap:.5rem;
  border-top:1px dashed var(--line);padding-top:.85rem;
}
.playground__swatches b{
  font-size:.72rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em;
}
.pg-font-group{display:flex;flex-direction:column;gap:.35rem}
.pg-swatches{display:inline-flex;flex-wrap:wrap;gap:.35rem}
.pg-swatch{
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  border-radius:999px;padding:.24rem .7rem;font:600 .8rem/1 var(--font-ui);
  cursor:pointer;min-height:30px;transition:all .15s;
}
.pg-swatch:hover{border-color:var(--ink-2);color:var(--accent-ink)}
.pg-swatch[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* Fonts index table ----------------------------------------------------- */
.tbl-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap::-webkit-scrollbar{height:.5rem}
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.tbl{width:100%;min-width:32rem;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);background:var(--surface-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl .fname{font-size:1.05rem;font-weight:600}
.tbl tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--surface-2)}

/* Generator page -------------------------------------------------------- */
.gen-controls{display:grid;grid-template-columns:1fr;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem}
@media (min-width:640px){.gen-controls{grid-template-columns:repeat(2,1fr)}}
.gen-controls label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:var(--ink-2);font-weight:600}
.gen-controls select,.gen-controls input{font:500 .95rem var(--font-ui);padding:.6rem .7rem;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--ink)}
.gen-submit{grid-column:1/-1}
.score-pill{background:var(--accent);color:#fff;border-radius:999px;padding:.15rem .6rem;font-size:.75rem;font-weight:700}
.results-note{color:var(--ink-2);font-size:.92rem}
.empty-state{text-align:center;color:var(--ink-2);padding:2.5rem 1rem;background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius)}
.gen-note{color:var(--ink-2);font-size:.95rem;margin:0 0 1.1rem}

/* Favorites empty + grid ------------------------------------------------- */
#fav-grid{min-height:40px}

/* Footer ---------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--line);margin-top:clamp(2rem,6vw,4rem);background:var(--surface-2)}
.site-footer__inner{
  display:grid;gap:1.2rem 2.2rem;align-items:start;
  max-width:var(--maxw);margin-inline:auto;
  padding-block:2rem 2.6rem;padding-inline:clamp(1rem,4vw,2rem);
  grid-template-columns:1fr;
}
@media (min-width:700px){.site-footer__inner{grid-template-columns:1.4fr 1.2fr auto}}
@media (min-width:700px){.site-footer__inner .site-footer__nav{justify-self:end}}
.site-footer__brand strong{font-family:var(--font-display);font-size:1.3rem}
.site-footer__brand p{color:var(--ink-2);margin:.3rem 0 0;font-style:italic}
.site-footer__note{color:var(--ink-2);font-size:.9rem;max-width:46ch;margin:0}
.site-footer__nav{list-style:none;display:flex;flex-direction:column;gap:.35rem}
.site-footer__nav a{color:var(--ink-2);text-decoration:none;font-size:.92rem}
.site-footer__nav a:hover{color:var(--accent-ink);text-decoration:underline}
.site-footer small{display:block;margin-top:1rem;color:var(--ink-2)}

/* Visibility helper ----------------------------------------------------- */
[hidden]{display:none!important}

/* Custom-text toolbar ---------------------------------------------------- */
.text-toolbar{display:flex;gap:.8rem;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);padding:.8rem .9rem;margin-bottom:1.2rem;box-shadow:var(--shadow)}
.text-toolbar label{display:flex;flex-direction:column;gap:.25rem;flex:1 1 240px;font-size:.72rem;color:var(--ink-2);font-weight:600}
.text-toolbar input{font:500 .95rem var(--font-ui);border:1px solid var(--line);border-radius:8px;padding:.5rem .7rem;background:var(--surface);color:var(--ink)}
.text-toolbar input:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:0}

/* Index filter controls -------------------------------------------------- */
.fp-controls{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow);margin-bottom:1.4rem}
.fp-controls label{display:flex;flex-direction:column;gap:.3rem;font-size:.72rem;color:var(--ink-2);font-weight:600}
.fp-search{flex:1 1 240px}
.fp-controls input[type="search"],.fp-controls select{font:500 .95rem var(--font-ui);border:1px solid var(--line);border-radius:8px;padding:.5rem .7rem;background:var(--surface);color:var(--ink);min-height:40px}
.fp-controls input:focus,.fp-controls select:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:0}
.fp-filters{display:flex;flex-direction:column;gap:.4rem;flex:1 1 100%;margin-top:.4rem}
.fp-filters__group,.fp-chips{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.fp-chips b{font-size:.75rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em;margin-right:.2rem}
.fp-chip{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:.35rem .8rem;font:600 .82rem/1 var(--font-ui);cursor:pointer;min-height:34px;transition:all .15s}
.fp-chip:hover{border-color:var(--ink-2);color:var(--accent-ink)}
.fp-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.results-note{flex:1 1 100%;margin:.2rem 0 0;font-size:.88rem}

/* Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;animation:none!important}}

/* ==========================================================================
   Font utility classes — one per Google Font in the library.
   Used by the client engine and playground to apply pairing fonts.
   ========================================================================== */
.font-inter{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-roboto{font-family:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-open-sans{font-family:'Open Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-lato{font-family:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-montserrat{font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-poppins{font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-oswald{font-family:'Oswald',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-merriweather{font-family:'Merriweather',Georgia,'Times New Roman',serif}
.font-playfair-display{font-family:'Playfair Display',Georgia,'Times New Roman',serif}
.font-libre-baskerville{font-family:'Libre Baskerville',Georgia,'Times New Roman',serif}
.font-dm-sans{font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-nunito{font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-raleway{font-family:'Raleway',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-source-sans-3{font-family:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-source-serif-4{font-family:'Source Serif 4',Georgia,'Times New Roman',serif}
.font-manrope{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-work-sans{font-family:'Work Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-rubik{font-family:'Rubik',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-ubuntu{font-family:'Ubuntu',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-archivo{font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-space-grotesk{font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-cormorant-garamond{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif}
.font-bebas-neue{font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif}
.font-barlow{font-family:'Barlow',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.font-quicksand{font-family:'Quicksand',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}