/**
 * Tattoo Listings v2.0 - Design Tokens
 * @description Imports unified DS tokens, adds tattoo-specific variables
 * @version 1.0.0
 * @date 2026-02-26
 */

@import url('../design-system/tokens.css');

:root {
  /* =======================================
     THEME-AWARE SEMANTIC ALIASES
     Map DS tokens to mockup names for brevity
     ======================================= */
  --bg: var(--color-bg);
  --bg-card: var(--color-bg-card);
  --bg-elevated: var(--color-bg-elevated);
  --bg-surface: var(--color-surface);
  --text: var(--color-text);
  --text-2: var(--color-text-secondary);
  --text-3: var(--color-text-muted);
  --border: var(--color-border);
  --border-hover: var(--color-border-hover);

  /* =======================================
     SHADOWS (dark-theme defaults)
     ======================================= */
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 8px var(--color-overlay-scrim-light);
  --overlay: rgba(0, 0, 0, 0.7);
  --grain-opacity: 0.03;
}

.light-theme {
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --overlay: rgba(255, 255, 255, 0.7);
  --grain-opacity: 0.015;

  --glass-bg: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(0, 0, 0, 0.06);
}