@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import "tailwindcss";

@theme {
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Warm ink — escala neutra com nuance quente */
  --color-ink-950: #0a0907;
  --color-ink-900: #110f0c;
  --color-ink-850: #15110d;
  --color-ink-800: #1a1612;
  --color-ink-750: #221c16;
  --color-ink-700: #2c241c;
  --color-ink-600: #3a322a;
  --color-ink-500: #5a5048;
  --color-ink-400: #7a6f63;
  --color-ink-300: #a39a8d;
  --color-ink-200: #c9c0b3;
  --color-ink-100: #e8dfd2;
  --color-ink-50:  #f5ede4;

  /* Acid — sinal primário "live/active" */
  --color-acid-300: #d8f566;
  --color-acid-400: #cdf138;
  --color-acid-500: #a3e635;
  --color-acid-600: #84cc16;
  --color-acid-700: #65a30d;

  /* Semânticos quentes */
  --color-coral-400: #f4836f;
  --color-coral-500: #e85d4d;
  --color-coral-600: #c8442e;
  --color-teal-500:  #5eb89e;
  --color-amber-500: #f59e0b;
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    font-feature-settings: 'ss01' on, 'cv11' on;
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    font-family: var(--font-sans);
    font-feature-settings: 'cv11', 'ss01';
    background: var(--color-ink-950);
    color: var(--color-ink-100);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.45;
    overscroll-behavior: none;
  }

  #root {
    width: 100%;
    min-height: 100vh;
    text-align: unset;
    border: none;
    margin: 0;
    display: block;
    color: inherit;
    background: transparent;
  }

  /* Selection */
  ::selection { background: var(--color-acid-500); color: var(--color-ink-950); }

  /* Scrollbar */
  ::-webkit-scrollbar         { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track   { background: var(--color-ink-950); }
  ::-webkit-scrollbar-thumb   {
    background: var(--color-ink-700);
    border: 2px solid var(--color-ink-950);
    border-radius: 0;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--color-ink-600); }

  /* Defaults para inputs autofill */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-ink-50);
    -webkit-box-shadow: 0 0 0 1000px var(--color-ink-900) inset;
    transition: background-color 9999s ease-in-out 0s;
    caret-color: var(--color-acid-400);
  }
}

/* Background grid sutil 48×48 com fade radial */
.bg-grid {
  background-image:
    linear-gradient(to right,  rgba(245, 237, 228, 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245, 237, 228, 0.022) 1px, transparent 1px);
  background-size: 48px 48px;
}

.bg-grid-fade {
  -webkit-mask-image: radial-gradient(ellipse at top, black 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at top, black 30%, transparent 80%);
}

/* Noise overlay (textura quase imperceptível) */
.noise::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

/* Tipografia helpers */
.font-display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; }
.font-display-italic { font-family: var(--font-display); font-weight: 400; font-style: italic; letter-spacing: -0.02em; }
.tabular { font-variant-numeric: tabular-nums; }
.numeric-display { font-family: var(--font-display); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }

/* Animações */
@keyframes fade-up      { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes fade-in      { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-right  { from { opacity: 0; transform: translate3d(-12px, 0, 0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes blink-pulse  { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--color-acid-500); } 50% { opacity: 0.55; box-shadow: 0 0 0 4px transparent; } }
@keyframes scan-line    { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } }
@keyframes ticker       { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }

.animate-fade-up    { animation: fade-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-fade-in    { animation: fade-in 0.5s ease-out both; }
.animate-slide-right{ animation: slide-right 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-blink      { animation: blink-pulse 1.6s ease-in-out infinite; }

/* Stagger helper */
[data-stagger="1"]  { animation-delay: 0.05s; }
[data-stagger="2"]  { animation-delay: 0.10s; }
[data-stagger="3"]  { animation-delay: 0.15s; }
[data-stagger="4"]  { animation-delay: 0.20s; }
[data-stagger="5"]  { animation-delay: 0.25s; }
[data-stagger="6"]  { animation-delay: 0.30s; }
[data-stagger="7"]  { animation-delay: 0.35s; }
[data-stagger="8"]  { animation-delay: 0.40s; }
[data-stagger="9"]  { animation-delay: 0.45s; }

/* Hard-edge focus ring (substitui o ring redondo padrão) */
.focus-acid:focus { outline: none; }
.focus-acid:focus-visible {
  outline: 1px solid var(--color-acid-500);
  outline-offset: 2px;
}

/* Tenant card brand strip */
.brand-strip {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}
.brand-strip-host:hover .brand-strip { width: 8px; filter: brightness(1.15) saturate(1.1); }

/* Underline reveal helper (ações editoriais) */
.under-reveal {
  position: relative;
  padding-bottom: 2px;
}
.under-reveal::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.under-reveal:hover::after { transform: scaleX(1); }

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
