/*
 * Design tokens — "Gece Studyosu" decision (LAB-158, 21 Aug 2026, Umut+Ilgaz),
 * vendored verbatim from labinate-boilerplate's app/assets/css/tokens.css (LAB-159).
 * Color and font-family values are the fixed brand decision — do not change
 * them here without a new decision on LAB-158.
 *
 * Dark mode is the default (`:root`). Light mode activates automatically
 * via `prefers-color-scheme` — both must stay fully usable. No toggle.
 */

:root {
  /* Colors */
  --color-primary: #5b5bf6; /* Elektrik Indigo — large text/UI only, 4.05:1 on dark bg */
  --color-accent: #f2a93b; /* Kehribar — raw brand color, large text/UI elements */
  --color-accent-text: #f2a93b; /* Kehribar as small/body text — AA on dark bg (9.96:1) */
  --color-bg: #08090d;
  --color-text: #f5f6f8; /* AA on dark bg (18.4:1) */
  --color-muted: #9a9db0;
  --color-border: #22242e;

  /* Typography */
  --font-heading: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Spacing — 4px base scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Corner radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;

  /* Elevation */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
}

@media (prefers-color-scheme: light) {
  :root {
    --color-accent-text: #8a5a12; /* AA on light bg (5.47:1) — plain #f2a93b fails as text here */
    --color-bg: #f5f6f8;
    --color-text: #0e1016; /* AA on light bg (17.58:1) */
    --color-muted: #5b5e6b;
    --color-border: #dfe1e8;
  }
}

/* Self-hosted brand fonts (vendored from @fontsource, SIL OFL) — no 3P font CDN. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/fonts/inter-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/space-grotesk-700.woff2') format('woff2');
}

/* Site */

* {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-10) var(--space-5) var(--space-16);
}

a {
  color: var(--color-accent-text);
}

a:hover,
a:focus-visible {
  text-decoration-thickness: 2px;
}

header {
  margin-bottom: var(--space-10);
}

header a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  text-decoration: none;
  color: var(--color-text);
}

h1,
h2,
h3,
h4 {
  line-height: 1.25;
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-4xl);
  margin-top: 0;
}

h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-2xl);
}

h3,
h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xl);
}

article {
  max-width: 70ch;
}

article p,
article ul,
article ol,
article blockquote {
  margin: var(--space-5) 0;
}

article ul,
article ol {
  padding-left: var(--space-6);
}

article blockquote {
  border-left: 3px solid var(--color-border);
  padding-left: var(--space-4);
  color: var(--color-muted);
}

article strong {
  font-weight: 600;
}

article pre {
  overflow-x: auto;
  padding: var(--space-4);
  margin: var(--space-5) 0;
  background: var(--color-border);
  border-radius: var(--radius-md);
  line-height: 1.5;
}

article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

article :not(pre) > code {
  background: var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
}

time {
  display: inline-block;
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

ul.postlist {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0;
}

ul.postlist li {
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

ul.postlist li:last-child {
  border-bottom: none;
}

ul.postlist a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  text-decoration: none;
  color: var(--color-text);
}

ul.postlist a:hover,
ul.postlist a:focus-visible {
  color: var(--color-accent-text);
}

ul.postlist time {
  display: block;
  margin-top: var(--space-1);
  margin-bottom: 0;
}

.intro {
  color: var(--color-muted);
  font-size: var(--text-lg);
}

.not-found h1 {
  font-size: var(--text-4xl);
  color: var(--color-accent-text);
}

footer {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

@media (max-width: 30rem) {
  body {
    padding: var(--space-6) var(--space-4) var(--space-12);
  }

  h1 {
    font-size: var(--text-3xl);
  }
}