/* ===========================================
   🌈 Pocket Pebbles – Colour Palette v1
   Version: 1.0
   =========================================== */

:root {
  /* 🔗 Bridge Calm Clarity inverse token to PP palette */
  --cc-text-inverse: var(--pp-text-inverse);

  /* 🎨 Primary – Pebble Indigo */
  --pp-primary-50:  #F3F0FF;
  --pp-primary-100: #E6E0FF;
  --pp-primary-200: #CFC2FF;
  --pp-primary-300: #B2A0F7;
  --pp-primary-400: #9A86EE;
  --pp-primary-500: #7B67D4;
  --pp-primary-600: #6A55BC;
  --pp-primary-700: #5844A0;
  --pp-primary-800: #463681;
  --pp-primary-900: #342963;

  /* 🪨 Neutrals – Sand & Stone */
  --pp-neutral-50:  #FAF9F7;
  --pp-neutral-100: #F1EFEA;
  --pp-neutral-200: #E2DED6;
  --pp-neutral-300: #C7C2B6;
  --pp-neutral-400: #9B9587;
  --pp-neutral-500: #6E695D;
  --pp-neutral-700: #47443C;
  --pp-neutral-900: #2A2723;

  /* 💧 Pebble Aqua */
  --pp-aqua-50:  #E7FCF8;
  --pp-aqua-100: #CCF7EF;
  --pp-aqua-300: #8EEBD9;
  --pp-aqua-500: #44D1BA;
  --pp-aqua-700: #1E9F8C;

  /* 🌺 Pebble Coral */
  --pp-coral-50:  #FFECE8;
  --pp-coral-100: #FFD7D0;
  --pp-coral-300: #FFAB9D;
  --pp-coral-500: #FF7A68;
  --pp-coral-700: #E2533E;

  /* 🌞 Pebble Sunflower */
  --pp-sun-50:  #FFF9D9;
  --pp-sun-100: #FFF1A8;
  --pp-sun-300: #FFE45C;
  --pp-sun-500: #FACC15;
  --pp-sun-700: #C29B0C;

  /* ✨ Magic Lavender */
  --pp-magic-50:  #F8EDFF;
  --pp-magic-100: #EFD8FF;
  --pp-magic-300: #D3A7FF;
  --pp-magic-500: #BB7CFB;
  --pp-magic-700: #934ACF;

  /* 🖋 Text System */
  --pp-text-strong:  #2A2723;
  --pp-text-default: #47443C;
  --pp-text-soft:    #6E695D;
  --pp-text-inverse: #FFFFFF;

  /* 🧱 Background Tokens */
  --pp-bg-default: var(--pp-neutral-50);
  --pp-bg-soft:    var(--pp-neutral-100);
  --pp-bg-primary: var(--pp-primary-50);
  --pp-bg-aqua:    var(--pp-aqua-50);
  --pp-bg-coral:   var(--pp-coral-50);
  --pp-bg-magic:   var(--pp-magic-50);
}

/* Utility classes */
.cc-pp-bg-primary { background: var(--pp-primary-50); }
.cc-pp-bg-aqua    { background: var(--pp-aqua-50); }
.cc-pp-bg-coral   { background: var(--pp-coral-50); }
.cc-pp-bg-magic   { background: var(--pp-magic-50); }
.cc-pp-bg-soft    { background: var(--pp-neutral-100); }

.cc-pp-text-strong  { color: var(--pp-text-strong); }
.cc-pp-text-soft    { color: var(--pp-text-soft); }
.cc-pp-text-inverse { color: var(--pp-text-inverse); }

/* ===========================================
   Pocket Pebbles – Button Skins (Corrected)
   Works with Gutenberg's wrapper classes
   =========================================== */

/* PRIMARY BUTTON
   Add to wrapper:
   cc-button cc-pp-button
*/
.wp-block-button.cc-button.cc-pp-button .wp-block-button__link {
  background-color: var(--pp-primary-500) !important;
  color: #fff !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 1.25rem !important;
}

.wp-block-button.cc-button.cc-pp-button .wp-block-button__link:hover {
  background-color: var(--pp-primary-600) !important;
}

/* GHOST BUTTON
   Add to wrapper:
   cc-button cc-button--ghost cc-pp-button--ghost
*/
.wp-block-button.cc-button.cc-pp-button--ghost .wp-block-button__link {
  background-color: transparent !important;
  color: var(--pp-primary-500) !important;
  border: 1px solid var(--pp-primary-400) !important;
  border-radius: 0.5rem !important;
}

.wp-block-button.cc-button.cc-pp-button--ghost .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.10) !important;
}

/* Ghost button for dark backgrounds */
.wp-block-button.cc-button.cc-pp-button--ghost-dark .wp-block-button__link {
  background-color: transparent !important;
  color: var(--pp-text-inverse) !important; /* bright text */
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 0.5rem !important;
}

.wp-block-button.cc-button.cc-pp-button--ghost-dark .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* ===========================================
   Pocket Pebbles – Essential Colour Utilities
   (backgrounds + basic text for sections)
   =========================================== */

/* PRIMARY (Indigo) */
.cc-pp-bg-primary-50  { background-color: var(--pp-primary-50); }
.cc-pp-bg-primary-200 { background-color: var(--pp-primary-200); }
.cc-pp-bg-primary-700 { background-color: var(--pp-primary-700); }

/* AQUA */
.cc-pp-bg-aqua-50  { background-color: var(--pp-aqua-50); }
.cc-pp-bg-aqua-300 { background-color: var(--pp-aqua-300); }
.cc-pp-bg-aqua-700 { background-color: var(--pp-aqua-700); }

/* CORAL */
.cc-pp-bg-coral-50  { background-color: var(--pp-coral-50); }
.cc-pp-bg-coral-300 { background-color: var(--pp-coral-300); }
.cc-pp-bg-coral-700 { background-color: var(--pp-coral-700); }

/* MAGIC LAVENDER */
.cc-pp-bg-magic-50  { background-color: var(--pp-magic-50); }
.cc-pp-bg-magic-300 { background-color: var(--pp-magic-300); }
.cc-pp-bg-magic-700 { background-color: var(--pp-magic-700); }

/* NEUTRALS (for bands & soft sections) */
.cc-pp-bg-neutral-50  { background-color: var(--pp-neutral-50); }
.cc-pp-bg-neutral-200 { background-color: var(--pp-neutral-200); }
.cc-pp-bg-neutral-900 { background-color: var(--pp-neutral-900); }

/* TEXT UTILITIES – reuse existing tokens */
.cc-pp-text-default  { color: var(--pp-text-default); }
.cc-pp-text-soft     { color: var(--pp-text-soft); }
.cc-pp-text-inverse  { color: var(--pp-text-inverse); }

/* Handy helper: dark “band” section */
.cc-pp-section-dark {
  background-color: var(--pp-primary-800);
  color: var(--pp-text-inverse);
}

.cc-pp-section-dark h1,
.cc-pp-section-dark h2,
.cc-pp-section-dark h3,
.cc-pp-section-dark h4,
.cc-pp-section-dark h5,
.cc-pp-section-dark h6,
.cc-pp-section-dark p {
  color: var(--pp-text-inverse);
}