/**
 * variables.css
 * ─────────────
 * Global design tokens (colors, spacing, shadows, fonts).
 * Change these to retheme the entire site.
 */

:root {
  /* Colors */
  --bg: #ffffff;
  --card: #fafafa;
  --text: #111111;
  --text-secondary: #666666;
  --accent: #000000;
  --hover: #222222;
  --border: #ececec;
  --gold: #b8965a;

  /* Typography */
  --font: "Cairo", system-ui, -apple-system, sans-serif;

  /* Border radius scale */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Shadow scale */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 32px 80px rgba(0, 0, 0, 0.1);

  /* Layout */
  --nav-height: 80px;
  --container: 1200px;
  --container-wide: 1400px;
  --section-gap: clamp(80px, 12vw, 160px);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.6s;
}