/**
 * SophEva Design Tokens & CSS Variables
 * Palette, Typography, Spacing, Elevation & Transitions
 */

:root {
  /* Color Palette */
  --ink: #20160f;
  --ink-rgb: 32, 22, 15;
  --cream: #fbf5ef;
  --paper: #ffffff;
  --card: #fffdfb;
  --terra: #a3351e;
  --terra-rgb: 163, 53, 30;
  --terra-2: #c44d33;
  --peach: #ffe3d6;
  --sand: #f3e9dd;
  --gold: #c98a3a;
  --navy: #2f3a63;
  --muted: #8a7166;
  --line: rgba(32, 22, 15, 0.10);
  --line-strong: rgba(32, 22, 15, 0.18);

  /* Elevation Shadows */
  --shadow: 0 18px 50px -20px rgba(80, 40, 20, 0.35);
  --shadow-sm: 0 8px 24px -14px rgba(80, 40, 20, 0.28);
  --shadow-hover: 0 24px 60px -18px rgba(80, 40, 20, 0.40);
  --shadow-drawer: -10px 0 35px rgba(32, 22, 15, 0.22);

  /* Spacing */
  --pad: 76px;
  --pad-sm: 48px;
  --wrap-max: 1200px;
  --wrap-pad: 24px;

  /* Border Radii */
  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 26px;
  --radius-full: 100px;

  /* Typography */
  --font-serif: "Fraunces", Georgia, serif;
  --font-sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --trans-fast: 0.2s var(--ease-out);
  --trans-med: 0.3s var(--ease-out);
  --trans-slow: 0.7s var(--ease-out);
}