/* GodBrowser Aperture typography. Shared identity tokens are appended at build time. */

/* ---- Geist (the DS SANS face) — SELF-HOSTED woff2 (DS-gap mirror; the apps get it
 * from next/font/google, a static site has no build step so we ship the woff2 as a
 * same-origin asset — a strict CSP + no external font CDN. SIL OFL, see
 * assets/fonts/Geist-LICENSE.txt). Only weights 400 + 500 are used (headings 400–500,
 * body 400, eyebrows/strong 500 — Geist has no 600 cut, matching the DS "never 600" rule). */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Geist-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Geist-Medium.woff2") format("woff2");
}

:root {
  --font-sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ================================================================
 * type.css — hand-transliterated from the Tailwind @utility/@apply source to plain
 * CSS. Heading weight is 400–500, NEVER 600 (the flat aesthetic's loudest tell).
 * heading-meta (mono + UPPERCASE + tracking-wider, 12px/500) is THE signature eyebrow.
 * ================================================================ */
.heading-title    { font-size: 1.5rem;  line-height: 2rem;    letter-spacing: -0.025em; font-weight: 400; scroll-margin: 5rem; }
.heading-section  { font-size: 1.25rem; line-height: 1.75rem; font-weight: 400; scroll-margin: 5rem; }
.heading-subSection { font-size: 1rem;  line-height: 1.5rem;  font-weight: 400; scroll-margin: 5rem; }
.heading-default  { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; scroll-margin: 5rem; }
.heading-compact  { font-size: 0.75rem; line-height: 1rem;    font-weight: 500; scroll-margin: 5rem; }

/* The signature Supabase eyebrow — pair with a dulled AA color at the call site. */
.heading-meta {
  font-size: 0.75rem; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;
}

.text-default  { font-size: 1rem; }
.text-subTitle { font-size: 1.125rem; }
.text-compact  { font-size: 0.75rem; }

.text-link {
  color: var(--foreground-light); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: inherit; transition: color 0.12s;
}
.text-link:hover { color: var(--foreground); text-decoration-color: var(--foreground); }

.text-code-inline {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: -0.01em;
  background: var(--surface-200); border: 1px solid var(--border-muted);
  border-radius: var(--radius-md); padding: 0.125rem 0.25rem;
  color: var(--foreground); font-weight: 500; overflow-wrap: anywhere;
}

/* @layer base map — a bare heading is correct by construction (weight 400–500). */
h1 { font-size: 1.5rem;  line-height: 2rem;    letter-spacing: -0.025em; font-weight: 400; }
h2 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 400; }
h3 { font-size: 1rem;    line-height: 1.5rem;  font-weight: 400; }
h4, h5 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
h6 { font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
small { font-size: 0.75rem; }
strong { font-weight: 500; }

/* ================================================================
 * prose.css — dropped in verbatim (plain CSS). Headings 400–500, links brand green,
 * inline code = the text-code-inline recipe, OPAQUE borders, token radii.
 * ================================================================ */
.prose, .prose-docs, .prose-compact { color: inherit; line-height: 1.6; }
.prose :is(h1,h2,h3,h4,h5,h6),
.prose-docs :is(h1,h2,h3,h4,h5,h6),
.prose-compact :is(h1,h2,h3,h4,h5,h6) {
  color: var(--foreground); font-weight: 400; line-height: 1.3;
  margin: 1.4em 0 0.5em; scroll-margin-top: 5rem;
}
.prose :is(h1,h2):first-child,
.prose-docs :is(h1,h2):first-child,
.prose-compact :is(h1,h2):first-child { margin-top: 0; }
.prose :is(h3,h4,h5,h6),
.prose-docs :is(h3,h4,h5,h6),
.prose-compact :is(h3,h4,h5,h6) { font-weight: 500; }
.prose h2, .prose-docs h2, .prose-compact h2 {
  padding-top: 0.4em; border-top: 1px solid var(--border);
}
.prose p, .prose-docs p, .prose-compact p { margin: 0.7em 0; }
.prose :is(ul,ol), .prose-docs :is(ul,ol), .prose-compact :is(ul,ol) { padding-left: 1.4em; margin: 0.7em 0; }
.prose li, .prose-docs li, .prose-compact li { margin: 0.3em 0; }
.prose strong, .prose-docs strong, .prose-compact strong { font-weight: 500; }
.prose a, .prose-docs a, .prose-compact a {
  color: var(--brand-link); text-decoration: none; text-underline-offset: 4px;
}
.prose a:hover, .prose-docs a:hover, .prose-compact a:hover { text-decoration: underline; }
.prose code, .prose-docs code, .prose-compact code {
  font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-200);
  border: 1px solid var(--border-muted); border-radius: var(--radius-sm);
  padding: 0 0.35em; overflow-wrap: anywhere; word-break: break-word;
}
.prose pre, .prose-docs pre, .prose-compact pre {
  background: var(--surface-200); color: var(--foreground); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 0.75rem; overflow-x: auto; line-height: 1.5; margin: 0.8em 0;
}
.prose pre code, .prose-docs pre code, .prose-compact pre code {
  background: transparent; border: 0; border-radius: 0; padding: 0; font-size: inherit;
  overflow-wrap: normal; word-break: normal;
}
.prose blockquote, .prose-docs blockquote, .prose-compact blockquote {
  border-left: 3px solid var(--border); padding-left: 0.75rem; margin: 0.8em 0; color: var(--muted-foreground);
}
.prose hr, .prose-docs hr, .prose-compact hr { border: 0; border-top: 1px solid var(--border); margin: 1.5em 0; }
.prose img, .prose-docs img, .prose-compact img { border-radius: var(--radius-lg); }
.prose table, .prose-docs table, .prose-compact table { border-collapse: collapse; width: 100%; margin: 0.8em 0; }
.prose :is(th,td), .prose-docs :is(th,td), .prose-compact :is(th,td) {
  border: 1px solid var(--border); padding: 0.375rem 0.625rem; text-align: left; vertical-align: top;
}
.prose th, .prose-docs th, .prose-compact th { background: var(--surface-200); font-weight: 500; }
.prose { font-size: 0.875rem; }
.prose h1 { font-size: 1.5rem; } .prose h2 { font-size: 1.25rem; } .prose h3 { font-size: 1.125rem; }
.prose h4 { font-size: 1rem; } .prose :is(h5,h6) { font-size: 0.875rem; }
.prose-docs { font-size: 0.9375rem; line-height: 1.7; }
.prose-docs h1 { font-size: 1.875rem; } .prose-docs h2 { font-size: 1.5rem; } .prose-docs h3 { font-size: 1.25rem; }
.prose-docs h4 { font-size: 1.0625rem; } .prose-docs :is(h5,h6) { font-size: 0.9375rem; }
.prose-docs :is(p,ul,ol) { margin: 0.9em 0; }
.prose-compact { font-size: 0.8125rem; }
.prose-compact :is(h1,h2,h3,h4,h5,h6) { margin: 1.1em 0 0.4em; }
.prose-compact h1 { font-size: 1.25rem; } .prose-compact h2 { font-size: 1rem; } .prose-compact h3 { font-size: 0.875rem; }
.prose-compact :is(h4,h5,h6) { font-size: 0.8125rem; color: var(--muted-foreground); }
.prose-compact :is(p,ul,ol) { margin: 0.5em 0; }
.prose-compact pre { font-size: 0.75rem; } .prose-compact code { font-size: 0.85em; }

/* Generated from website/design/tokens.json. Run python3 website/design/build_design.py. */
:root {
  --background: #ffffff;
  --foreground: #161616;
  --card: #ffffff;
  --card-foreground: #161616;
  --popover: #ffffff;
  --popover-foreground: #161616;
  --primary: #d2ae58;
  --primary-foreground: #17140b;
  --secondary: #f7f7f5;
  --secondary-foreground: #161616;
  --muted: #f7f7f5;
  --muted-foreground: #626262;
  --accent: #ececea;
  --accent-foreground: #161616;
  --surface-75: #ffffff;
  --surface-100: #ffffff;
  --surface-200: #f7f7f5;
  --surface-300: #eeeeeb;
  --surface-400: #dededb;
  --background-selection: #eaeae7;
  --foreground-light: #454545;
  --foreground-lighter: #626262;
  --foreground-muted: #6c6c68;
  --border: #dededb;
  --border-muted: #eaeae7;
  --border-secondary: #eaeae7;
  --border-strong: #bdbdb8;
  --border-stronger: #858580;
  --border-control: #858580;
  --border-overlay: #dededb;
  --input: #858580;
  --ring: #805c17;
  --brand: #805c17;
  --brand-200: #f8f2e2;
  --brand-300: #f0e1bc;
  --brand-400: #dec581;
  --brand-500: #a88331;
  --brand-600: #805c17;
  --brand-link: #805c17;
  --success: #276544;
  --info: #475569;
  --destructive: #b42318;
  --destructive-foreground: #ffffff;
  --destructive-500: #d28a82;
  --destructive-600: #b42318;
  --warning: #855800;
  --warning-500: #b79653;
  --warning-600: #855800;
  --chart-1: #805c17;
  --chart-2: #565656;
  --chart-3: #858580;
  --chart-4: #b2b2ac;
  --chart-5: #d5d5cf;
  --font-display: var(--font-sans);
  --font-heading: var(--font-sans);
  --font-mono: Menlo, Consolas, 'Liberation Mono', monospace;
  --radius: 0.375rem;
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-xl: 0.5rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --control-h-sm: 2rem;
  --control-h: 2.25rem;
  --control-h-field: 2.75rem;
  --control-h-nav: 2.75rem;
  --shadow-overlay: 0 12px 40px rgb(0 0 0 / 12%);
  --shadow-subtle: 0 1px 2px rgb(0 0 0 / 4%);
  --motion-fast: 140ms;
  --motion-normal: 220ms;
  --motion-ease: cubic-bezier(.2,.8,.2,1);
  --gb-ink: #161616;
  --gb-paper: #f7f7f5;
  --gb-charcoal: #242424;
  --gb-white: #ffffff;
  --z-navigation: 40;
  --z-popover: 50;
  --z-dialog: 100;
  --z-toast: 200;
  --primary-hover: #bf983f;
  --brand-gold: #d2ae58;
  --brand-gold-foreground: #17140b;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --background: #0d0d0d;
  --foreground: #f1f1ef;
  --card: #151515;
  --card-foreground: #f1f1ef;
  --popover: #202020;
  --popover-foreground: #f1f1ef;
  --primary: #e0bb65;
  --primary-foreground: #17140b;
  --primary-hover: #edcf89;
  --secondary: #181818;
  --secondary-foreground: #f1f1ef;
  --muted: #181818;
  --muted-foreground: #adadab;
  --accent: #2b2b2b;
  --accent-foreground: #f1f1ef;
  --surface-75: #0d0d0d;
  --surface-100: #151515;
  --surface-200: #181818;
  --surface-300: #222222;
  --surface-400: #343434;
  --background-selection: #373020;
  --foreground-light: #cdcdca;
  --foreground-lighter: #adadab;
  --foreground-muted: #a3a39f;
  --border: #343434;
  --border-muted: #292929;
  --border-secondary: #292929;
  --border-strong: #626262;
  --border-stronger: #a3a39f;
  --border-control: #7c7c77;
  --border-overlay: #484848;
  --input: #7c7c77;
  --ring: #e0bb65;
  --brand: #e0bb65;
  --brand-200: #241f13;
  --brand-300: #39301c;
  --brand-400: #645029;
  --brand-500: #ac8b41;
  --brand-600: #e0bb65;
  --brand-link: #e0bb65;
  --success: #89c9a6;
  --info: #acbfd8;
  --destructive: #ffaaa3;
  --destructive-foreground: #240d0a;
  --destructive-500: #b97870;
  --destructive-600: #ffaaa3;
  --warning: #e2bf78;
  --warning-500: #bd994f;
  --warning-600: #e2bf78;
  --chart-1: #e0bb65;
  --chart-2: #d1d1cb;
  --chart-3: #a8a8a2;
  --chart-4: #83837f;
  --chart-5: #62625f;
  --shadow-overlay: 0 12px 40px rgb(0 0 0 / 45%);
  --shadow-subtle: 0 1px 2px rgb(0 0 0 / 20%);
  --gb-paper: #181818;
  color-scheme: dark;
}