/* LUXTIS design tokens — silver/violet-black palette from logo */
:root {
  --ink: #050509;
  --ink-2: #0b0a12;
  --ink-3: #14111c;
  --ivory: #f4f1f6;
  --ivory-dim: #c9c3d4;
  --bronze: #6d5a88;
  --gold: #b8b0c8;
  --gold-warm: #e6dff2;
  --violet: #2a1f3d;
  --violet-glow: #7a5fb3;
  --line: rgba(244, 241, 246, 0.1);
  --line-strong: rgba(244, 241, 246, 0.26);
  --muted: rgba(244, 241, 246, 0.5);

  --font-serif: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1440px;
  --gutter: clamp(20px, 4vw, 64px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="editorial"] {
  --ink: #130e1e;
  --ink-2: #1a1429;
  --ink-3: #221a34;
  --ivory: #f4f1f6;
  --ivory-dim: #d4cce0;
  --bronze: #8a6ca8;
  --gold: #c7b8d9;
  --gold-warm: #ecdff8;
  --line: rgba(244, 241, 246, 0.14);
  --line-strong: rgba(244, 241, 246, 0.3);
  --muted: rgba(244, 241, 246, 0.6);
}

[data-theme="light"] {
  --ink: #f4f1f6;
  --ink-2: #eae5ef;
  --ink-3: #ded8e6;
  --ivory: #14111c;
  --ivory-dim: #3a324a;
  --bronze: #5a4678;
  --gold: #5a4678;
  --gold-warm: #7a5fb3;
  --line: rgba(20, 17, 28, 0.12);
  --line-strong: rgba(20, 17, 28, 0.3);
  --muted: rgba(20, 17, 28, 0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 400ms var(--ease), color 400ms var(--ease);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.smallcaps {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}

.serif { font-family: var(--font-serif); }
.mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

/* Reveal utility */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Glow for lights */
.glow {
  filter: drop-shadow(0 0 8px rgba(230, 223, 242, 0.7)) drop-shadow(0 0 24px rgba(122, 95, 179, 0.35));
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 0; }

/* Placeholder image box */
.placeholder {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(245, 239, 230, 0.03) 0 2px,
      transparent 2px 14px),
    linear-gradient(180deg, var(--ink-2), var(--ink-3));
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.placeholder .label {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--muted); letter-spacing: 0.05em;
}
.placeholder .tag {
  position: absolute; bottom: 12px; right: 12px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--gold); letter-spacing: 0.05em;
}

/* ─── MOBILE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }

  /* Gutter reduzido */
  :root { --gutter: 20px; }

  /* Fonte base ligeiramente menor */
  html { font-size: 14px; }

  /* Scrollbar oculta em mobile */
  ::-webkit-scrollbar { width: 0; height: 0; }

  /* Secções — padding lateral mínimo */
  section { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }

  /* Headings escalam melhor em ecrãs pequenos */
  h1 { font-size: clamp(40px, 12vw, 72px) !important; }
  h2 { font-size: clamp(32px, 9vw, 56px) !important; }
  h3 { font-size: clamp(22px, 6vw, 36px) !important; }

  /* Animação scroll indicator */
  @keyframes scrollLine {
    0%, 100% { opacity: 0.3; transform: scaleY(0.4); }
    50% { opacity: 1; transform: scaleY(1); }
  }
}

/* Animação scrollLine global */
@keyframes scrollLine {
  0%, 100% { opacity: 0.3; transform: scaleY(0.4); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* Animação marquee global */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}