/* ============================================================================
   Linktree Design System — shared tokens + classes
   Extracted verbatim from src/app/globals.css (Next.js source of truth).
   Every value is pixel-accurate at the 1440px breakpoint.
   ============================================================================ */

@font-face {
  font-family: "Linksans";
  src: url("../assets/fonts/LinkSans-LinkSansVF.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@50..150,100..900&family=DM+Mono:wght@300;400;500&display=swap");

:root {
  /* Brand colors — from @theme inline in globals.css */
  --color-shade: #1e2330;
  --color-forest: #254f1a;
  --color-lavender: #e9c0e9;
  --color-iris: #061492;
  --color-chartreuse: #d2e823;
  --color-hydrangea: #2665d6;
  --color-marble: #f3f3f1;
  --color-currant: #780016;
  --color-goldenrod: #d6a336;
  --color-dahlia: #502274;
  --color-root: #4c2e05;
  --color-rose: #fc3e4b;
  --color-lichen: #f6f7f5;
  --color-light-green: #e8efd6;
  --color-canopy: #43e660;
  --color-orchid: #cc01dd;
  --color-poppy: #ff9313;
  --color-sky: #02acc4;
  --color-concrete: #676b5f;
  --color-grey: #e0e2d9;
  --color-moss: #70764d;
  --color-red: #c41500;

  /* Fonts */
  --font-linksans: "Linksans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-dm-mono: "DM Mono", "Roboto Mono", ui-monospace, monospace;
  --font-anybody: "Anybody", sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-linksans);
  color: var(--color-shade);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

/* ============================================================================
   Typography — pixel values at 1440px (from globals.css @media min-width:1440)
   ============================================================================ */

.h1 {
  font-family: var(--font-linksans);
  font-size: 80px;
  font-weight: 800;
  font-variation-settings: "wght" 820;
  line-height: 107%;
  letter-spacing: -0.02em;
  color: var(--color-shade);
  margin: 0;
}

.h2 {
  font-family: var(--font-linksans);
  font-size: 56px;
  font-weight: 700;
  font-variation-settings: "wght" 820;
  line-height: 106%;
  letter-spacing: -0.02em;
  color: var(--color-shade);
  margin: 0;
}

.h3 {
  font-family: var(--font-linksans);
  font-size: 40px;
  font-weight: 500;
  line-height: 130%;
  color: var(--color-shade);
  margin: 0;
}

.h3.card-h3 {
  font-size: 28px;
  text-align: left;
  letter-spacing: -0.01em;
}

.h3.card_h3 {
  font-size: 25.4px;
  font-variation-settings: "wght" 540;
  letter-spacing: -0.01em;
}

.p {
  font-family: var(--font-linksans);
  font-size: 18.18px;
  font-weight: 400;
  font-variation-settings: "wght" 418;
  line-height: 150%;
  color: #000;
  margin: 0;
}

.p.p-large { font-size: 18.18px; }

.eyebrow, .social_hero-subtitle {
  font-family: var(--font-linksans);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.mono {
  font-family: var(--font-dm-mono);
}

/* ============================================================================
   Buttons — from .button + .button.wide_button @1440
   ============================================================================ */

.button {
  font-family: var(--font-linksans);
  font-size: 16px;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  line-height: 100%;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 99px;
  padding: 20px 26px 22px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s, opacity 0.15s;
  color: #000;
}
.button:hover { opacity: 0.9; }

.button.wide_button {
  min-width: 292.3px;
  min-height: 65.03px;
}

/* ============================================================================
   Backgrounds
   ============================================================================ */

.background-color_shade { background-color: var(--color-shade); }
.background-color_forest { background-color: var(--color-forest); }
.background-color_lavender { background-color: var(--color-lavender); }
.background-color_iris { background-color: var(--color-iris); }
.background-color_chartreuse { background-color: var(--color-chartreuse); }
.background-color_hydrangea { background-color: var(--color-hydrangea); }
.background-color_marble { background-color: var(--color-marble); }
.background-color_currant { background-color: var(--color-currant); }
.background-color_goldenrod { background-color: var(--color-goldenrod); }
.background-color_dahlia { background-color: var(--color-dahlia); }
.background-color_root { background-color: var(--color-root); }
.background-color_rose { background-color: var(--color-rose); }
.background-color_lichen { background-color: var(--color-lichen); }
.background-color_light-green { background-color: var(--color-light-green); }
.background-color_canopy { background-color: var(--color-canopy); }
.background-color_orchid { background-color: var(--color-orchid); }
.background-color_poppy { background-color: var(--color-poppy); }
.background-color_sky { background-color: var(--color-sky); }
.background-color_lime { background-color: var(--color-chartreuse); }
.background-color_red { background-color: var(--color-currant); }
.background-color_white { background-color: #fff; }

/* Text colors */
.text-color_shade { color: var(--color-shade); }
.text-color_forest { color: var(--color-forest); }
.text-color_lavender { color: var(--color-lavender); }
.text-color_iris { color: var(--color-iris); }
.text-color_chartreuse { color: var(--color-chartreuse); }
.text-color_hydrangea { color: var(--color-hydrangea); }
.text-color_currant { color: var(--color-currant); }
.text-color_dahlia { color: var(--color-dahlia); }
.text-color_root { color: var(--color-root); }
.text-color_white { color: #fff; }
.text-color_black { color: #000; }
.text-color_concrete { color: var(--color-concrete); }
.text-color_canopy { color: var(--color-canopy); }

/* Button colors */
.button-color_forest { background-color: var(--color-forest); color: #fff; }
.button-color_chartreuse { background-color: var(--color-chartreuse); color: #000; }
.button-color_lavender { background-color: var(--color-lavender); color: #000; }
.button-color_iris { background-color: var(--color-iris); color: #fff; }
.button-color_dahlia { background-color: var(--color-dahlia); color: #fff; }
.button-color_root { background-color: var(--color-root); color: #fff; }
.button-color_shade { background-color: var(--color-shade); color: #fff; }
.button-color_currant { background-color: var(--color-currant); color: #fff; }
.button-color_white { background-color: #fff; color: #000; }
.button-color_orangered { background-color: var(--color-rose); color: #fff; }
.button-color_hydrangea { background-color: var(--color-hydrangea); color: #fff; }
.button-color_orchid { background-color: var(--color-orchid); color: #fff; }

/* ============================================================================
   Spacing / Gaps / Radii — @1440 pixel values
   ============================================================================ */

.gap_16px { gap: 16px; }
.gap_24px { gap: 24px; }
.gap_40px { gap: 40px; }
.gap_48px { gap: 48px; }
.gap_80px { gap: 80px; }
.gap_100px { gap: 100px; }
.gap_128px { gap: 128px; }

.radius_16px { border-radius: 16px; }
.radius_32px { border-radius: 32px; }
.rounded_card { border-radius: 41.6px; }

.flex-horizontal { display: flex; flex-flow: row; }
.flex-vertical { display: flex; flex-flow: column; }

/* ============================================================================
   Doc-specific UI (not part of the design system — just for documentation pages)
   ============================================================================ */

.doc-body {
  background: #f6f7f5;
  color: #1e2330;
  font-family: var(--font-linksans);
  min-height: 100vh;
}

.doc-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 48px 120px;
}

.doc-topnav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 48px;
  background: #fff;
  border-bottom: 1px solid #e0e2d9;
  position: sticky;
  top: 0;
  z-index: 100;
  font-size: 14px;
}
.doc-topnav a {
  color: var(--color-shade);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  transition: background 0.1s;
}
.doc-topnav a:hover { background: var(--color-lichen); }
.doc-topnav a.current { background: var(--color-shade); color: #fff; }
.doc-topnav .brand {
  font-weight: 700;
  font-variation-settings: "wght" 720;
  font-size: 16px;
  margin-right: auto;
  display: flex; align-items: center; gap: 10px;
}
.doc-topnav .brand .dot {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--color-chartreuse);
  display: inline-flex; align-items: center; justify-content: center;
}
.doc-topnav .brand .dot svg { width: 14px; }

.doc-hero {
  margin-bottom: 64px;
  padding-top: 16px;
}
.doc-hero .crumb {
  font-family: var(--font-dm-mono);
  font-size: 12px;
  color: var(--color-concrete);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.doc-hero h1 {
  font-size: 64px;
  font-weight: 800;
  font-variation-settings: "wght" 820;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0 0 20px;
  max-width: 900px;
}
.doc-hero p {
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-concrete);
  margin: 0;
  max-width: 700px;
}

.doc-section {
  margin-bottom: 80px;
}
.doc-section > header {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e2d9;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.doc-section > header h2 {
  font-size: 32px;
  font-weight: 700;
  font-variation-settings: "wght" 720;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--color-shade);
}
.doc-section > header .num {
  font-family: var(--font-dm-mono);
  font-size: 13px;
  color: var(--color-concrete);
  letter-spacing: 0.08em;
}
.doc-section > header .meta {
  margin-left: auto;
  font-family: var(--font-dm-mono);
  font-size: 12px;
  color: var(--color-concrete);
}

.doc-card {
  background: #fff;
  border: 1px solid #e0e2d9;
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 20px;
}
.doc-card > header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.doc-card > header h3 {
  font-size: 22px;
  font-weight: 700;
  font-variation-settings: "wght" 720;
  margin: 0;
  letter-spacing: -0.01em;
}
.doc-card > header .path {
  font-family: var(--font-dm-mono);
  font-size: 12px;
  color: var(--color-concrete);
  background: var(--color-lichen);
  padding: 4px 10px;
  border-radius: 6px;
}
.doc-card > header .used {
  font-family: var(--font-dm-mono);
  font-size: 11px;
  color: var(--color-forest);
  background: var(--color-light-green);
  padding: 3px 10px;
  border-radius: 6px;
  margin-left: auto;
  font-weight: 500;
}
.doc-card .desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-concrete);
  margin: 0 0 20px;
  max-width: 780px;
}
.doc-card .desc strong { color: var(--color-shade); font-weight: 600; }

/* Preview frame — renders a component at desktop scale inside a bounded box */
.preview {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e0e2d9;
  position: relative;
  margin-bottom: 16px;
}
.preview .preview-label {
  position: absolute;
  top: 10px; left: 12px;
  font-family: var(--font-dm-mono);
  font-size: 10px;
  color: var(--color-concrete);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.85);
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 10;
  backdrop-filter: blur(4px);
}
.preview-stage {
  /* 1440px design width scaled to fit */
  width: 1440px;
  transform-origin: top left;
  background: #fff;
}

/* Code block */
pre.ts {
  background: #1e2330;
  color: #e0e2d9;
  padding: 20px 24px;
  border-radius: 10px;
  font-family: var(--font-dm-mono);
  font-size: 12.5px;
  line-height: 1.55;
  overflow-x: auto;
  margin: 0 0 16px;
}
pre.ts .kw { color: #d2e823; }
pre.ts .str { color: #e9c0e9; }
pre.ts .cm { color: #70764d; font-style: italic; }
pre.ts .tp { color: #02acc4; }
pre.ts .pr { color: #ff9313; }

/* Inline code */
code.inline {
  font-family: var(--font-dm-mono);
  font-size: 12.5px;
  background: var(--color-lichen);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--color-currant);
}

/* Callouts */
.callout {
  border-left: 3px solid var(--color-chartreuse);
  background: var(--color-light-green);
  padding: 14px 18px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.55;
  margin: 12px 0;
  color: var(--color-shade);
}
.callout.warn {
  border-left-color: var(--color-poppy);
  background: #fff3e1;
}
.callout strong { font-weight: 600; }

/* Table */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.doc-table th, .doc-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-grey);
  vertical-align: top;
}
.doc-table th {
  font-family: var(--font-dm-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-concrete);
  font-weight: 500;
}
.doc-table td code {
  font-family: var(--font-dm-mono);
  font-size: 12px;
  background: var(--color-lichen);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--color-currant);
}

/* TOC */
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
}
.toc a {
  font-family: var(--font-dm-mono);
  font-size: 12px;
  color: var(--color-shade);
  background: #fff;
  border: 1px solid var(--color-grey);
  padding: 6px 12px;
  border-radius: 99px;
  text-decoration: none;
  transition: all 0.1s;
}
.toc a:hover {
  background: var(--color-shade);
  color: #fff;
  border-color: var(--color-shade);
}