/* Bloom website — colors and other design tokens.
   Edit this file to change the site's look. The colors are the app's
   "Blush & Clay" palette (mobile-app/constants/Colors.ts). */

:root {
  /* Surfaces */
  --warm-white: #FFFBF8;
  --pale-rose: #FDF0E6;
  --blush-cream: #F5E8E0;
  --soft-peach: #E8C4A0;
  --warm-charcoal: #3A2F2F;
  --espresso: #33261E;

  /* Accents */
  --terracotta: #D4836B;
  --clay-rose: #C47D5E;
  --clay-red: #B4513D;
  --clay-deep: #A84A37; /* clay red, a shade deeper: small text stays readable on the tinted surfaces */

  /* Text */
  --text: #3A2F2F;
  --text-secondary: #6B5A52;
  --text-muted: #776661;
  --light-on-dark: #FFF8F3;
  --peach-on-dark: #E8C4A0;

  --hairline: rgba(196, 125, 94, 0.22);
  --hairline-on-dark: rgba(232, 196, 160, 0.22);
  --shadow-photo: 0 28px 56px -28px rgba(58, 47, 47, 0.45), 0 4px 14px -6px rgba(58, 47, 47, 0.18);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-text: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --container: 1160px;
  --gutter: 24px;
  --nav-height: 72px;
  --radius-photo: 28px;
  --radius-card: 20px;
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --nav-height: 64px; }
}