@import "tailwindcss";

/*
 * Warm & Personal Theme for Tailwind v4
 * A cozy, approachable design for staying connected with people you care about
 */

@theme {
  /* Warm coral/peach primary colors */
  --color-primary-50: #FFF5F5;
  --color-primary-100: #FFE8E8;
  --color-primary-200: #FFD0D0;
  --color-primary-300: #FFB0B0;
  --color-primary-400: #FF8888;
  --color-primary-500: #FF6B6B;
  --color-primary-600: #F05252;
  --color-primary-700: #D93F3F;
  --color-primary-800: #B83232;
  --color-primary-900: #8F2727;

  /* Cream backgrounds */
  --color-cream-50: #FFFDFB;
  --color-cream-100: #FFF8F0;
  --color-cream-200: #FFF3E6;
  --color-cream-300: #FFEDD9;
  --color-cream-400: #FFE4C4;
  --color-cream-500: #FFDDB3;

  /* Warm grays (with brown undertones) */
  --color-warmGray-50: #FAF9F7;
  --color-warmGray-100: #F5F3F0;
  --color-warmGray-200: #E8E5E1;
  --color-warmGray-300: #D3CFC8;
  --color-warmGray-400: #B8B2A7;
  --color-warmGray-500: #9C9589;
  --color-warmGray-600: #7D7669;
  --color-warmGray-700: #5F5950;
  --color-warmGray-800: #423F38;
  --color-warmGray-900: #2B2926;

  /* Soft teal accent */
  --color-accent-500: #14B8A6;
  --color-accent-600: #0D9488;
  --color-accent-700: #0F766E;

  /* Soft shadows */
  --shadow-soft: 0 2px 8px rgba(255, 107, 107, 0.08);
  --shadow-soft-lg: 0 4px 16px rgba(255, 107, 107, 0.12);

  /* Warning colors (warm amber/yellow) */
  --color-warning-50: #FFFBEB;
  --color-warning-500: #FDE047;
  --color-warning-600: #FACC15;
}

@layer base {
  body {
    background-color: var(--color-cream-100);
    color: var(--color-warmGray-900);
    font-feature-settings: "kern" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--color-warmGray-900);
    letter-spacing: -0.02em;
  }
}