/* NGIPL color system — strictly monochrome brand core.
   Black + white come from the logo artwork; charcoal #222021 is sampled from
   the printed diary cover. Warm-neutral grays are derived from that charcoal.
   Functional (success/warning/danger) colors are UI-only additions for
   interface states — never brand surfaces. */
:root {
  /* Base — brand core */
  --ngipl-black: #000000;
  --ngipl-charcoal: #222021;
  --ngipl-white: #ffffff;
  --ngipl-paper: #f4f2ef;

  /* Base — warm neutral ramp (derived from charcoal) */
  --gray-900: #262323;
  --gray-800: #3a3636;
  --gray-700: #4f4a4a;
  --gray-600: #6b6565;
  --gray-500: #8a8483;
  --gray-400: #a8a3a1;
  --gray-300: #c6c2c0;
  --gray-200: #ddd9d6;
  --gray-100: #eceae7;
  --gray-50:  #f6f5f3;

  /* Base — functional (UI states only; not brand colors) */
  --green-700: #2f6c46;
  --amber-700: #9c6b1f;
  --red-700:   #a83232;
  --green-50:  #eef4ef;
  --amber-50:  #f8f2e7;
  --red-50:    #f9eded;

  /* Semantic — text */
  --text-display: var(--ngipl-black);
  --text-body: var(--gray-900);
  --text-muted: var(--gray-600);
  --text-faint: var(--gray-500);
  --text-inverse: var(--ngipl-white);
  --text-inverse-muted: rgba(255, 255, 255, 0.64);

  /* Semantic — surfaces */
  --surface-page: var(--ngipl-white);
  --surface-paper: var(--ngipl-paper);
  --surface-sunken: var(--gray-50);
  --surface-card: var(--ngipl-white);
  --surface-dark: var(--ngipl-charcoal);
  --surface-black: var(--ngipl-black);
  --surface-scrim: rgba(34, 32, 33, 0.56);

  /* Semantic — borders */
  --border-strong: var(--ngipl-black);
  --border-default: var(--gray-300);
  --border-subtle: var(--gray-200);
  --border-inverse: rgba(255, 255, 255, 0.28);

  /* Semantic — interactive */
  --action-primary: var(--ngipl-black);
  --action-primary-hover: var(--gray-800);
  --action-primary-active: var(--ngipl-charcoal);
  --focus-ring: var(--ngipl-black);
}