/* ===== Orgànico Studio — Color tokens ===== */
:root {
  /* --- Brand primitives --- */
  --yellow: #ffff00;          /* Pantone 803 C — signal accent */
  --charcoal: #333333;        /* Pantone 447 C — brand ink */
  --grey-1: #989898;          /* mid grey */
  --grey-2: #d8d8d8;          /* light grey */
  --white: #ffffff;

  /* extended neutrals derived from the charcoal/grey ramp */
  --charcoal-900: #1c1c1c;    /* near-black surfaces */
  --charcoal-700: #2a2a2a;
  --charcoal-500: #333333;
  --grey-400: #6b6b6b;
  --grey-300: #989898;
  --grey-200: #d8d8d8;
  --grey-100: #ececec;
  --grey-50:  #f4f4f4;        /* page off-white (site background) */

  /* --- Semantic aliases --- */
  --bg-page: var(--grey-50);
  --bg-surface: var(--white);
  --bg-inverse: var(--charcoal-500);
  --bg-accent: var(--yellow);
  --bg-muted: var(--grey-200);

  --text-primary: var(--charcoal-500);
  --text-secondary: var(--grey-400);
  --text-muted: var(--grey-300);
  --text-inverse: var(--white);
  --text-on-accent: var(--charcoal-500);

  --border-subtle: var(--grey-200);
  --border-strong: var(--charcoal-500);

  --focus-ring: var(--charcoal-500);
}