/* tokens.css — Faro Propiedades design system */

:root {
  /* default = warm minimal */
  --bg: #faf8f4;
  --bg-elev: #ffffff;
  --bg-soft: #f3efe7;
  --ink: #1a1815;
  --ink-2: #4a4640;
  --ink-3: #807a70;
  --ink-4: #b8b1a4;
  --line: #e7e2d6;
  --line-strong: #d4cdbe;
  --accent: #b85c3c; /* terracotta */
  --accent-ink: #ffffff;
  --accent-soft: #f4e4dc;
  --positive: #4a7c59;
  --warn: #c89b3c;
  --danger: #b54545;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(26, 24, 21, .04), 0 1px 1px rgba(26, 24, 21, .02);
  --shadow: 0 4px 14px rgba(26, 24, 21, .06), 0 1px 3px rgba(26, 24, 21, .04);
  --shadow-lg: 0 24px 60px rgba(26, 24, 21, .12), 0 4px 12px rgba(26, 24, 21, .06);

  --font-sans: 'Inter Tight', 'Inter', -apple-system, system-ui, sans-serif;
  --font-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --display: var(--font-serif);
  --body: var(--font-sans);
}

[data-theme="dark"] {
  --bg: #14130f;
  --bg-elev: #1c1a16;
  --bg-soft: #232019;
  --ink: #f5f1e8;
  --ink-2: #c8c2b4;
  --ink-3: #8a8478;
  --ink-4: #5a5448;
  --line: #2c2922;
  --line-strong: #3a362d;
  --accent-soft: #2c1f19;
}

[data-aesthetic="editorial"] {
  --bg: #fbfaf7;
  --bg-elev: #ffffff;
  --bg-soft: #efece4;
  --ink: #0d0c0a;
  --ink-2: #3a3833;
  --ink-3: #6e6a60;
  --line: #e0dbcd;
  --accent: #2d4a3e; /* deep forest */
  --accent-soft: #dfe5e0;
}

[data-aesthetic="editorial"][data-theme="dark"] {
  --bg: #0c0c0a;
  --bg-elev: #14140f;
  --bg-soft: #1a1a14;
  --ink: #f0ede4;
  --line: #2a2820;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }

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

/* utilities */
.gp-display { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.05; }
.gp-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.gp-mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: -0.01em; }

/* image placeholder (for when images fail to load) */
.gp-ph {
  background:
    repeating-linear-gradient(135deg,
      var(--bg-soft) 0 12px,
      color-mix(in oklch, var(--bg-soft), var(--ink) 6%) 12px 13px);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
}

/* button base */
.gp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: .5px solid transparent;
  font-size: 13.5px; font-weight: 500;
  transition: all .18s ease;
  white-space: nowrap;
  background: transparent;
  color: var(--ink);
}
.gp-btn-primary {
  background: var(--ink); color: var(--bg);
}
.gp-btn-primary:hover { background: var(--accent); color: var(--accent-ink); }
.gp-btn-accent { background: var(--accent); color: var(--accent-ink); }
.gp-btn-accent:hover { filter: brightness(.92); }
.gp-btn-ghost { border-color: var(--line-strong); color: var(--ink); }
.gp-btn-ghost:hover { background: var(--bg-soft); border-color: var(--ink); }
.gp-btn-text { padding: 10px 4px; }
.gp-btn-text:hover { color: var(--accent); }

/* chip / pill */
.gp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--bg-soft);
  font-size: 12px; color: var(--ink-2);
  border: .5px solid var(--line);
}
.gp-chip.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* card */
.gp-card {
  background: var(--bg-elev);
  border: .5px solid var(--line);
  border-radius: var(--radius);
  transition: all .2s ease;
}
.gp-card:hover { border-color: var(--line-strong); }

/* form */
.gp-input, .gp-select, .gp-textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  border: .5px solid var(--line-strong);
  background: var(--bg-elev);
  color: var(--ink);
  font-size: 14px;
  outline: none;
  transition: all .15s ease;
}
.gp-input:focus, .gp-select:focus, .gp-textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent), transparent 85%);
}
.gp-textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
.gp-label {
  display: block; font-size: 12px; color: var(--ink-2);
  margin-bottom: 6px; font-weight: 500;
}

/* scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 10px;
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* fade in */
@keyframes gp-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.gp-fade { animation: gp-fade-up .4s cubic-bezier(.2,.7,.2,1) both; }

/* grain (subtle texture for warm aesthetic) */
.gp-grain::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.5'/></svg>");
  opacity: .35; mix-blend-mode: multiply;
}

/* real images */
.gp-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}