/* css/variables.css */

:root {

  /* =========================
     COLORS
  ========================== */

  --background: #f5f5f7;

  --surface: #ffffff;

  --text: #111827;

  --text-light: #6b7280;

  --border:
    rgba(0,0,0,0.08);

  --accent: #ff3b1d;

  --accent-dark: #e42d10;

  /* =========================
     SHADOWS
  ========================== */

  --shadow-sm:
    0 4px 10px rgba(0,0,0,0.04);

  --shadow-md:
    0 10px 30px rgba(0,0,0,0.06);

  --shadow-lg:
    0 30px 60px rgba(0,0,0,0.10);

  /* =========================
     BORDER RADIUS
  ========================== */

  --radius-sm: 12px;

  --radius-md: 18px;

  --radius-lg: 28px;

  /* =========================
     CONTAINER
  ========================== */

  --container-width: 1400px;

  /* =========================
     TRANSITIONS
  ========================== */

  --transition:
    0.25s ease;

}