@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;600;700&display=swap");

@font-face {
  font-family: "Gambarino";
  src: url("../fonts/Gambarino-Regular.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Warm cream / taupe ramp (light-on-dark text) */
  --gray-50:  #F8E8DA;
  --gray-100: #F1DECC;
  --gray-200: #E7CFB9;
  --gray-300: #D8B9A0;
  --gray-400: #C29C84;
  --gray-500: #A67C68;
  --gray-600: #7E5A4C;
  --gray-700: #5A3E36;
  --gray-800: #3B2823;
  --gray-900: #281A17;

  /* Claret / wine ramp — primary brand */
  --clay-50:  #FBE9DC;
  --clay-100: #F3CDB9;
  --clay-200: #E39F8B;
  --clay-300: #C9605C;
  --clay-400: #AC3B47;
  --clay-500: #8E2540;
  --clay-600: #7C1E3A;
  --clay-700: #6A162F;
  --clay-800: #560F26;
  --clay-900: #43091C;

  /* Berry secondary ramp */
  --olive-50:  #F6DCDD;
  --olive-100: #E7B7BC;
  --olive-300: #C77E86;
  --olive-500: #8A2D46;
  --olive-700: #6E1B34;
  --olive-900: #4A0E20;

  /* Blush + coral accent ramp */
  --ochre-300: #F2B49C;
  --ochre-500: #F5E1CE;
  --ochre-700: #C97F5C;

  --color-bg: #7C1E3A;
  --color-surface: #F8E8DA;
  --color-surface-alt: #6A162F;
  --color-text: #F8E8DA;
  --color-text-muted: #E4B4A9;
  --color-border: rgba(248,232,218,0.22);

  --color-accent: #EFA184;
  --color-accent-hover: #E88E6C;
  --color-accent-fg: #43091C;
  --color-accent-soft: rgba(239,161,132,0.20);
  --color-accent-soft-fg: #F8E8DA;

  --color-secondary: #F5E1CE;
  --color-secondary-hover: #FBEEE1;
  --color-secondary-fg: #43091C;

  --color-focus-ring: #EFA184;

  --font-display: "Gambarino", "Fraunces", "Playfair Display", Georgia, serif;
  --font-sans: "Gambarino", "Fraunces", "Playfair Display", Georgia, serif;
  --font-mono: "Gambarino", "Fraunces", "Playfair Display", Georgia, serif;
  --font-script: "Dancing Script", "Gambarino", cursive;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(20,4,10,.10);
  --shadow-sm: 0 1px 3px rgba(20,4,10,.16), 0 1px 2px rgba(20,4,10,.10);
  --shadow-md: 0 8px 24px rgba(20,4,10,.20);
  --shadow-lg: 0 20px 48px rgba(20,4,10,.32);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-emphasized: cubic-bezier(.3,0,0,1);
  --ease-out: cubic-bezier(0,0,.2,1);

  --edge: clamp(20px, 5vw, 88px);
  --measure: 65ch;
}