/* tokens.css */

/* Reset (se vuoi tenerlo qui ok, altrimenti spostalo in base.css) */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body { height: 100%; }

:root {
  /* ========== TYPO ========== */
  --font-main: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Ubuntu, sans-serif;

  /* scala font (puoi estenderla quando ti serve) */
  --fs-02: 8px;
  --fs-01: 10px;
  --fs-1: 12px;
  --fs-1-5: 13px;
  --fs-2: 14px;
  --fs-3: 16px;
  --fs-4: 18px;

  --lh: 1.5;

  /* ========== SPACING ========== */
  --space-0-125: 1px;
  --space-0: 4px;
  --space-0-25: 2px;
  --space-0-375: 3px;
  --space-0-5: 6px;
  --space-0-75: 6px;
  --space-0-625: 5px;
  --space-0-875: 7px;
  --space-1: 8px;
  --space-1-125: 9px;
  --space-1-25: 10px;
  --space-1-375: 11px;
  --space-1-5: 12px;
  --space-1-75: 14px;
  --space-1-875: 15px;
  --space-2: 16px;
  --space-2-25: 18px;
  --space-3: 24px;
  --space-4: 32px;

  /* ========== RADIUS ========== */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-2-5: 10px;
  --radius-3: 12px;
  --radius-pill: 999px;

  /* ========== ENGINE HELPERS ========== */
  --engine-card-min: 180px;

  /* ========== SIZES ========== */
  --size-70: 70px;
  --size-100: 100px;
  --size-120: 120px;
  --size-175: 175px;
  --size-180: 180px;
  --size-720: 720px;

  /* ========== ELEVATION / SHADOWS ========== */
  --shadow-1: 0 10px 30px rgba(0,0,0,.35);
  --shadow-2: 0 20px 60px rgba(0,0,0,.55);

  /* ========== TRANSITIONS ========== */
  --t-fast: 0.15s ease;

  /* ========== LAYOUT CONSTANTS ========== */
  --footer-h: 44px;
  --topbar-h: 56px;
  --modal-header-h: 40px;
  --modal-dock-h: 44px;

  --btn-h: 34px;
  --btn-px: 14px;
  --btn-radius: var(--radius-1);

  /* z-index */
  --z-modal: 1200;
  --z-dock: 1100;

  /* Dock offset */
  --dock-offset: 0px;

  /* ========== SEMANTIC COLOR TOKENS (usati dai componenti) ========== */
  /* Questi NON sono colori “veri”: vengono mappati dal tema */
  --bg-main: var(--c-bg);
  --bg-panel: var(--c-panel);
  --bg-input: var(--c-input);

  --text-main: var(--c-text);
  --text-muted: var(--c-muted);

  --accent: var(--c-accent);
  --accent-hover: var(--c-accent-hover);

  --chat-say: var(--c-chat-say);
  --chat-tag: var(--c-chat-tag);
  --chat-mention: var(--c-chat-mention);
  --location-pin-title: var(--c-location-pin-title);

  --border-color: var(--c-border);
  --border-w: 1px;
  --border: var(--border-w) solid var(--border-color);

  /* Stati/feedback (così elimini gli hardcoded tipo #ffd6d6 ecc.) */
  --success: var(--c-success);
  --warning: var(--c-warning);
  --danger:  var(--c-danger);

  --success-bg: var(--c-success-bg);
  --warning-bg: var(--c-warning-bg);
  --danger-bg:  var(--c-danger-bg);

  --success-border: var(--c-success-border);
  --warning-border: var(--c-warning-border);
  --danger-border:  var(--c-danger-border);
  --text-on-accent: var(--c-text-on-accent);

  --scrollbar-track: color-mix(in srgb, var(--bg-panel) 90%, transparent);
  --scrollbar-thumb: color-mix(in srgb, var(--border-color) 70%, var(--bg-main));
  --scrollbar-thumb-hover: color-mix(in srgb, var(--accent) 60%, var(--border-color));
}

/* Quando il body ha dock visibile, riserviamo spazio */
body.has-modal-dock {
  --dock-offset: var(--modal-dock-h);
}