/* ==========================================================================
   DESIGN SYSTEM, Dr. Reinaldo Ragazzo
   Extraído verbatim de roqueragazzo/drreinaldo-ai-search-site
   src/styles/global.css (ADR-012: CSS artesanal, sem Tailwind).
   Este arquivo é a ponte entre o site Astro e a experiência "Galeria Ragazzo":
   mesmos tokens, mesma tipografia, mesmas primitivas. Não inventar cores.
   ========================================================================== */

:root {
  /* Institutional, Stetic Lunar + Bruma Suave + editorial luxo */
  --lunar: #555d66;
  --lunar-deep: #3a4048;
  --lunar-ink: #1b1f24;
  --bruma: #b5a896;
  --bruma-readable: #8b7d68;   /* AA sobre paper, usar para itálicos/ênfase */
  --bruma-soft: #d7cebf;
  --bruma-pale: #ece5d9;
  --bruma-cream: #f6f1e8;
  --cobre: #c47d50;
  --cobre-soft: #ead1bf;

  /* Neutrals */
  --paper: #f7f2e9;
  --paper-warm: #eee5d8;
  --surface-clean: #fffdf8;
  --ink: #172026;
  --ink-soft: #343c40;
  --ink-muted: #5e5e5e;
  --ink-fade: #999;
  --hair: rgba(20, 24, 28, 0.12);
  --hair-strong: rgba(20, 24, 28, 0.22);

  /* Dark (theme-noir) */
  --noir: #0d1014;
  --noir-elev: #14181c;

  /* Type */
  --serif: "Fraunces", "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --f-xs: 11px; --f-sm: 13px; --f-base: 17px; --f-lg: 18px;

  /* Layout */
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1240px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Tema escuro do site, o museu vive neste tema */
.theme-noir {
  --paper: var(--noir);
  --paper-warm: #14181c;
  --ink: #ece5d9;
  --ink-soft: #c9c1b1;
  --ink-muted: #8d877a;
  --hair: rgba(236, 229, 217, 0.12);
  --hair-strong: rgba(236, 229, 217, 0.22);
}

/* --- Primitivas tipográficas (idênticas ao site) --- */
.ds-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted); }
.ds-label  { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted); }
.ds-display { font-family: var(--serif); font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; }
.ds-display em { font-style: italic; color: var(--bruma-readable); }
.ds-manifesto { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.4; color: var(--ink-soft); }
.ds-body { font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.ds-hair { height: 1px; background: var(--hair); }

/* --- Botão do site: pílula, uppercase mono-ish, 44px mínimo --- */
.ds-btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 24px; min-height: 44px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: transform .3s var(--ease), background .3s; }
.ds-btn:hover { background: var(--lunar-deep); }
.ds-btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--hair-strong); }
.ds-btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ds-btn .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* --- Link de navegação do site --- */
.ds-nav-link { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); position: relative; padding: 8px 0; text-decoration: none; transition: color .3s; }
.ds-nav-link::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 0; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.ds-nav-link:hover::after { width: 100%; }

/* --- Foco universal (WCAG) --- */
:focus-visible { outline: 2px solid var(--lunar); outline-offset: 3px; border-radius: 4px; }

/* --- Ruído editorial do site --- */
.ds-noise { position: fixed; inset: 0; pointer-events: none; opacity: .04; z-index: 3; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.9'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.theme-noir .ds-noise { opacity: .08; mix-blend-mode: screen; }

/* --- Mapeamento para a cena 3D (valores lidos pelo museum.js via getComputedStyle) --- */
:root {
  --scene-bg: var(--noir);            /* fundo/fog */
  --scene-wall: var(--paper-warm);    /* gesso das paredes (#eee5d8) */
  --scene-stone: var(--lunar-ink);    /* portais, plintos (#1b1f24) */
  --scene-brass: var(--bruma-readable);
  --scene-light: #f1dfbd;             /* claraboia, quente, do site "abstract-face-silk" */
  --scene-board: var(--bruma-pale);   /* painéis murais */

  /* Direção de arte por ato (2026-09-22, só do museu; hexadecimais porque o THREE.Color não lê color-mix).
     A luz do dia da claraboia vai do frio (Ato I, olhar) ao âmbar (Ato V, atravessar o tempo); as paredes
     acompanham, de um gesso cinza frio a um gesso cor de areia. A luz das obras (pedestais e quadros) é a
     mesma nos cinco atos, quente, como num museu. Cores das paredes derivadas da paleta do site. */
  --scene-light-1: #eef2f6;  /* claraboia do Ato I: dia claro e frio (perto de 6500 K) */
  --scene-light-2: #f8f1e6;  /* Ato II: dia neutro (perto de 5500 K) */
  --scene-light-3: #fbe6c8;  /* Ato III: dia quente (perto de 4500 K), vizinho de --scene-light */
  --scene-light-4: #ffd8ad;  /* Ato IV: tarde (perto de 3800 K) */
  --scene-light-5: #ffc68f;  /* Ato V: fim de tarde, âmbar (perto de 3200 K) */
  --scene-wall-1: #e4e3df;   /* gesso do Ato I: --paper-warm puxado para --lunar (cinza frio claro) */
  --scene-wall-2: #ebe6dd;   /* Ato II: entre --bruma-cream e --paper-warm (claro, arejado) */
  --scene-wall-3: #eee5d8;   /* Ato III: --paper-warm, o gesso de antes */
  --scene-wall-4: #e2d6c6;   /* Ato IV: --paper-warm com --bruma-soft (mais terroso) */
  --scene-wall-5: #e6d2bd;   /* Ato V: --paper-warm com --cobre-soft (areia quente) */
  --scene-art-light: #ffdcb6; /* luz de obra (spots dos pedestais e luz de quadro): quente, perto de 4000 K */
  --scene-ceiling: #26221d;  /* teto: pedra escura quente, distinto da névoa */
  --scene-floor: #17130f;    /* piso: pedra escura polida, brilho quente */
  /* Molduras (perfil de museu com chanfro, cantos em meia-esquadria): ouro velho nos quadros altos da pendura
     de Salão (parente do latão dos pedestais), nogueira nas gravuras e laca preta nas telas abstratas e Gesto. */
  --scene-frame-gilt: #a88b55;
  --scene-frame-walnut: #3b281c;
  --scene-frame-black: #0f0e0e;
}