/* TOYAMBITIONS — Brand System
   Palette: Noir / Ivoire / Rouge signature
   Type: Fraunces (display serif) + Inter (sans) + JetBrains Mono (labels)
*/

:root {
  /* Light mode (default) */
  --ink: #141210;
  --ink-soft: #2a2624;
  --ink-mute: #6b6460;
  --ivory: #f5f1ea;
  --ivory-warm: #ede7dc;
  --ivory-deep: #e3dcce;
  --paper: #faf7f1;
  --red: #c8102e;
  --red-deep: #9c0d24;
  --red-soft: rgba(200, 16, 46, 0.08);
  --line: rgba(20, 18, 16, 0.12);
  --line-strong: rgba(20, 18, 16, 0.32);

  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --fg-mute: var(--ink-mute);
  --surface: var(--ivory);
  --surface-2: var(--ivory-warm);
  --accent: var(--red);
  --accent-deep: var(--red-deep);
  --accent-soft: var(--red-soft);
  --border: var(--line);
  --border-strong: var(--line-strong);
}

[data-theme="dark"] {
  --bg: #0e0c0a;
  --fg: #f5f1ea;
  --fg-soft: rgba(245, 241, 234, 0.78);
  --fg-mute: rgba(245, 241, 234, 0.46);
  --surface: #181513;
  --surface-2: #221d1a;
  --accent: #e63e54;
  --accent-deep: #c8102e;
  --accent-soft: rgba(230, 62, 84, 0.12);
  --border: rgba(245, 241, 234, 0.12);
  --border-strong: rgba(245, 241, 234, 0.32);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body { background: var(--bg); color: var(--fg); }
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 380;
  line-height: 1.55;
  font-feature-settings: 'ss01', 'cv11';
  transition: background 0.4s ease, color 0.4s ease;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── GRAIN OVERLAY ── */
.grain::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
}
[data-theme="dark"] .grain::before { mix-blend-mode: screen; opacity: 0.14; }

/* ── TYPOGRAPHY ── */
.serif { font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-style: italic; letter-spacing: -0.015em; }
.serif-r { font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif; font-weight: 350; font-style: normal; letter-spacing: -0.01em; }
.mono { font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; font-weight: 400; }
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 500;
}
.eyebrow.accent { color: var(--accent); }

h1, h2, h3, h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 350; line-height: 1.05; letter-spacing: -0.02em; }

/* ── COMPONENTS ── */
.rule {
  height: 1px;
  background: var(--border);
  border: 0;
  width: 100%;
}
.rule.accent { background: var(--accent); width: 48px; height: 2px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border: 1px solid currentColor;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: var(--fg);
  transition: all 0.25s ease;
  position: relative;
}
.btn:hover { background: var(--fg); color: var(--bg); }
.btn .arrow { transition: transform 0.25s ease; }
.btn:hover .arrow { transform: translateX(4px); }

.btn-red {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-red:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

/* ── THEME TOGGLE ── */
.theme-toggle {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 50;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: transform 0.2s ease;
}
.theme-toggle:hover { transform: rotate(20deg); }

/* ── LOGO MARK (composite) ── */
.tya-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 350;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1;
}
.tya-mark .dot { color: var(--accent); }

/* ── BENTO / EDITORIAL CARDS ── */
.card {
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.card.solid-ink { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.card.solid-red { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── REVEAL ANIMATION ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .4s; }