/* ------------------------------------------------------------------
   Arda Gümüş — project design tokens
   Everything Tailwind cannot express lives here: tokens, base type,
   focus styles, reveal animation. Layout lives in the markup.
   ------------------------------------------------------------------ */

:root {
  color-scheme: dark;

  /* surfaces */
  --void: #070806;
  --panel: #0d0f0b;
  --panel-2: #12150f;
  --header: rgba(7, 8, 6, 0.82);

  /* type */
  --text: #edece2;
  --muted: #a3a797;
  --warm: #e6e1cd;

  /* lines */
  --line: rgba(237, 236, 226, 0.12);
  --line-strong: rgba(237, 236, 226, 0.24);

  /* accent — a grassier, deeper chartreuse than the reference lime */
  --accent: #9bd13a;
  --accent-text: #b9e860;
  --accent-hover: #aede56;
  --accent-ink: #0a0b06;
  --accent-soft: rgba(155, 209, 58, 0.12);

  /* typefaces */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --shadow-lift: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}

html.light {
  color-scheme: light;

  --void: #f2efe4;
  --panel: #faf8f0;
  --panel-2: #eae6d6;
  --header: rgba(242, 239, 228, 0.84);

  --text: #12130d;
  --muted: #5a5e50;
  --warm: #3b3a2c;

  --line: rgba(18, 19, 13, 0.14);
  --line-strong: rgba(18, 19, 13, 0.28);

  --accent: #8dbe2a;
  --accent-text: #47650a;
  --accent-hover: #7ead22;
  --accent-ink: #0a0b06;
  --accent-soft: rgba(141, 190, 42, 0.16);

  --shadow-lift: 0 30px 60px -45px rgba(30, 32, 15, 0.45);
}

body {
  background-color: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

/* Scroll reveal — added by script.js, ignored without JS */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger groups without inline delay styles */
.reveal-delay-1 {
  transition-delay: 70ms;
}
.reveal-delay-2 {
  transition-delay: 140ms;
}
.reveal-delay-3 {
  transition-delay: 210ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}