/* SooRich — Color Tokens
   Sampled from packaging renders + brand guideline swatch sheet
   (uploads/ChatGPT Image Jun 29 05_43_05 PM — labelled swatches:
   smash hit, matcha point, drop shot, double bounce, court side)
*/

:root {
  /* ---------- Base palette ---------- */

  /* Matcha Green — primary. Restoration, calm, nature. */
  --matcha-50:  #f7faea;
  --matcha-100: #eef3cd;
  --matcha-200: #dfe89e;
  --matcha-300: #d3e25a; /* "matcha point" — core brand green */
  --matcha-400: #c3d43f;
  --matcha-500: #a6b82b;
  --matcha-600: #7d8c20;
  --matcha-700: #5c661c;

  /* Deep Purple / Night Indigo — secondary. Sleep, night, premium. */
  --night-50:  #eeecf7;
  --night-100: #d3cdea;
  --night-200: #b3a4d9;
  --night-300: #9483c9; /* lavender cap accent */
  --night-600: #4a3f86;
  --night-800: #2c2560; /* deep indigo — powder pouch background */
  --night-900: #1c1740; /* darkest night, headlines-on-dark */

  /* Tangerine — accent. Morning energy, warmth, optimism. */
  --tangerine-100: #ffe4bf;
  --tangerine-300: #ffb35c;
  --tangerine-500: #ff8a00; /* "drop shot" — core accent orange */
  --tangerine-700: #cc6e00;

  /* Berry Pink — supporting accent, used on Sleep Mints / Night Reset line */
  --berry-100: #fde3ef;
  --berry-300: #f8a9cf;
  --berry-500: #fb5ba8; /* "smash hit" */
  --berry-600: #f36d9a; /* "double bounce" */
  --berry-700: #c23e78;

  /* Forest — deep supporting green, used for dark packaging + text-on-light */
  --forest-500: #3c5a22;
  --forest-700: #264414; /* "court side" */
  --forest-900: #1a2f0d;

  /* ---------- Neutrals ---------- */
  --neutral-0:   #ffffff;
  --neutral-off: #f8f5ee; /* off white */
  --neutral-beige: #ede4d4; /* warm beige */
  --neutral-100: #e6e1d6;
  --neutral-200: #d8d3c6; /* soft grey */
  --neutral-400: #a9a297;
  --neutral-600: #6f6a61;
  --neutral-800: #3a362f;
  --neutral-charcoal: #232320; /* charcoal */
  --neutral-black: #141311;

  /* ---------- Semantic aliases ---------- */
  --color-brand-primary: var(--matcha-300);
  --color-brand-secondary: var(--night-800);
  --color-brand-accent: var(--tangerine-500);
  --color-brand-berry: var(--berry-500);

  --surface-page: var(--neutral-off);
  --surface-card: var(--neutral-0);
  --surface-card-alt: var(--neutral-beige);
  --surface-sunken: var(--neutral-100);
  --surface-night: var(--night-800);
  --surface-night-deep: var(--night-900);
  --surface-inverse: var(--neutral-charcoal);

  --text-primary: var(--neutral-charcoal);
  --text-secondary: var(--neutral-600);
  --text-on-dark: var(--neutral-off);
  --text-on-dark-muted: var(--night-200);
  --text-brand: var(--forest-700);
  --text-accent: var(--tangerine-500);
  --text-link: var(--forest-700);

  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-400);
  --border-on-dark: rgba(248, 245, 238, 0.18);

  --focus-ring: var(--tangerine-500);

  /* Component-level */
  --btn-primary-bg: var(--forest-700);
  --btn-primary-bg-hover: var(--forest-900);
  --btn-primary-text: var(--neutral-off);

  --btn-secondary-bg: var(--matcha-300);
  --btn-secondary-bg-hover: var(--matcha-400);
  --btn-secondary-text: var(--forest-900);

  --btn-accent-bg: var(--tangerine-500);
  --btn-accent-bg-hover: var(--tangerine-700);
  --btn-accent-text: var(--neutral-off);
}