@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

/* Oshun Griot brand layer — retunes the Organic design system to the official
   brand palette. Load AFTER the design system's styles.css.
   Primary: black #27292C, red #772D3D, yellow #FFCE72, beige #F9F2DE.
   Secondary: light orange #F9CBBA, ice blue #EBFFFB, purple #DEE2FE,
   light purple #FBF0FF. Type: Caprasimo display over Figtree. */
:root {
  --color-bg: #F9F2DE;
  --color-surface: #F2E7CC;
  --color-text: #27292C;
  --color-divider: color-mix(in srgb, #27292C 16%, transparent);

  --color-neutral-100: #F7F3EA;
  --color-neutral-200: #E9E4D8;
  --color-neutral-300: #D3CEC2;
  --color-neutral-400: #B0ABA1;
  --color-neutral-500: #8A867E;
  --color-neutral-600: #67645E;
  --color-neutral-700: #4B4A46;
  --color-neutral-800: #35373B;
  --color-neutral-900: #27292C;

  /* Primary — brand red */
  --color-accent: #772D3D;
  --color-accent-100: #FBEFF1;
  --color-accent-200: #F5D8DD;
  --color-accent-300: #E7B2BD;
  --color-accent-400: #CD8595;
  --color-accent-500: #A75468;
  --color-accent-600: #8C3C50;
  --color-accent-700: #772D3D;
  --color-accent-800: #5A1F2C;
  --color-accent-900: #3B131C;

  /* Second voice — brand yellow */
  --color-accent-2: #FFCE72;
  --color-accent-2-100: #FFF8E8;
  --color-accent-2-200: #FFEECB;
  --color-accent-2-300: #FFE0A6;
  --color-accent-2-400: #FFCE72;
  --color-accent-2-500: #E7B24E;
  --color-accent-2-600: #C08F32;
  --color-accent-2-700: #8F6A21;
  --color-accent-2-800: #644916;
  --color-accent-2-900: #3F2E0E;

  --brand-light-orange: #F9CBBA;
  --brand-ice-blue: #EBFFFB;
  --brand-purple: #DEE2FE;
  --brand-light-purple: #FBF0FF;
}

/* The display face is heavy by design; hold it a touch tighter than default
   so long headlines stay readable at hero sizes. */
h1, h2, h3 { letter-spacing: -0.02em; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-600); }