/* EIKONA TOOLS · design tokens v1 · variant "tools"
   Un file, una verita. Ogni pagina linka questo file e consuma SOLO variabili. */

:root {
  --bg: #0e0e0e;
  --bg-alt: #161412;
  --card: #141210;
  --border: #2a2620;
  --text: #e8e4de;
  --muted: #9a958c;
  --faint: #6a665e;
  --accent: #c8a96e;
  --accent-dim: #a8874a;
  --font-body: Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-ui: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
  --radius: 6px;
}

/* Tema chiaro: mai bianco puro, due bianchi caldi alternati */
[data-theme='light'] {
  --bg: #ede9e1;
  --bg-alt: #f4f2ed;
  --card: #f4f2ed;
  --border: #d8d2c4;
  --text: #262320;
  --muted: #6a655c;
  --faint: #9a958c;
  --accent: #a8874a;
  --accent-dim: #8a6f3c;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

h1, h2, h3, h4 { color: var(--text); line-height: 1.15; }
a { color: var(--accent); }
small, .small, .meta { font-size: 13px; }

nav, .crumb, .label, .tag, code, kbd, button, .btn {
  font-family: var(--font-ui);
}

.crumb {
  font-size: 13px;
  color: var(--muted);
  padding: 0.9rem 0;
  letter-spacing: 0.04em;
}
.crumb a { color: var(--accent); text-decoration: none; }
.crumb a:hover { color: var(--text); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}
.card:hover { border-color: var(--accent-dim); }

.btn, button {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 13px;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius);
  cursor: pointer;
}
.btn:hover, button:hover { background: var(--accent); color: var(--bg); }
.btn-ghost { border-color: var(--border); color: var(--muted); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

input, textarea, select {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
}