/*
 * AIROOBI · Design tokens v2.0
 * Italian Editorial Manifesto · 2 May 2026
 * Source of truth: ROBY-Stuff/brand-and-community/AIROOBI_Brand_Kit_v2_0.html §06
 *
 * Usage: importare in <head> PRIMA del CSS pagina-specifico.
 *   <link rel="stylesheet" href="/src/tokens.css">
 *
 * Replace legacy tokens (--gold #4A9EFF, --black #060b18, ecc.) progressivamente.
 * Migration brief: ROBY_Brand_Pivot_v2_CCP_Brief_2026-05-02.md
 */

:root {
  /* Surfaces */
  --bg-primary: #FFFFFF;
  --bg-alt: #FAFAF7;

  /* Ink (text) */
  --ink: #0F1417;
  --ink-soft: rgba(15, 20, 23, 0.55);
  --ink-faint: rgba(15, 20, 23, 0.4);

  /* Renaissance gold — signature */
  --gold: #B8893D;
  --gold-light: #D4A04C;
  --gold-deep: #9F7820;

  /* Coral — seller-side action */
  --coral: #F73659;
  --coral-night: #FF5470;

  /* Espresso — dark-mode background (italianate warm) */
  --espresso: #1B1814;

  /* Lines / borders */
  --line: rgba(15, 20, 23, 0.12);
  --line-soft: rgba(15, 20, 23, 0.08);

  /* Asset-specific (kept as-is — NOT brand colors, but asset identifiers) */
  --aria-blue: #4A9EFF;
  --kas-green: #49EACB;

  /* Typography */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'DM Mono', ui-monospace, monospace;

  /* Geometry */
  --radius: 4px;
  --radius-sm: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;
}

[data-theme="dark"] {
  --bg-primary: #1B1814;
  --bg-alt: #2A2620;
  --ink: #F5F1E8;
  --ink-soft: rgba(245, 241, 232, 0.65);
  --ink-faint: rgba(245, 241, 232, 0.4);
  --coral: var(--coral-night);
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.08);
}

/*
 * Theme toggle infrastructure.
 * Add <button id="airoobi-theme-toggle" class="theme-toggle"> anywhere.
 * Loaded via /src/theme.js (auto-attaches handler + persists to localStorage).
 */
.theme-toggle {
  appearance: none;
  background: transparent;
  border: 0.5px solid var(--line);
  color: var(--ink);
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.2s ease, border-color 0.2s ease;
  font-family: var(--font-mono);
}
.theme-toggle:hover {
  background: var(--bg-alt);
  border-color: var(--gold);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/*
 * Smooth theme transition (avoid jarring flash on toggle)
 */
html.theme-transition,
html.theme-transition body,
html.theme-transition * {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
