/* ==========================================================================
   tokens.css — design tokens (colours, spacing, typography)
   All CSS custom properties live here. Add new variables here first.
   ========================================================================== */

:root {
  /* Brand palette (ported from the Next.js Tailwind theme) */
  --primary:        hsl(356, 77%, 49%);
  --primary-hover:  hsl(356, 77%, 39%);
  --secondary:      hsl(200, 100%, 50%);
  --accent:         hsl(340, 100%, 50%);

  --error:   hsl(0, 100%, 50%);
  --warning: hsl(45, 100%, 50%);
  --success: hsl(120, 100%, 50%);
  --info:    hsl(200, 100%, 50%);

  /* Neutrals — map to the Tailwind gray scale the design relied on */
  --white:     #ffffff;
  --black:     #000000;
  --gray-50:   #f9fafb;
  --gray-100:  #f3f4f6;
  --gray-200:  #e5e7eb;
  --gray-300:  #d1d5db;
  --gray-400:  #9ca3af;
  --gray-500:  #6b7280;
  --gray-600:  #4b5563;
  --gray-700:  #374151;
  --gray-800:  #1f2937;
  --gray-900:  #111827;
  --gray-950:  #030712;

  /* Fonts */
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;

  /* Layout */
  --container-max:  1536px;   /* matches Tailwind max-w-screen-2xl */
  --container-7xl:  80rem;
  --container-6xl:  72rem;
  --container-5xl:  64rem;

  /* Radius */
  --radius-sm:  0.375rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.05);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);

  /* Transitions */
  --transition: 200ms ease;

  /* Shared hero background — the blue-sky image used on every interior page.
     Path is relative to this stylesheet (assets/css/ → assets/images/). */
  --hero-sky: url("../images/blue-sky.jpg");
}