/* CARE / Anima International – Color tokens
   Sampled from the brand assets: teal #4CBCB9, deep teal #44AAA7, sun yellow #FEEC01.
   Aesthetic: black-and-white pencil illustration + flat teal shapes + a single yellow accent. */
:root {
  /* --- Teal (primary) --- */
  --teal-950: #17403E; /* brand dark surface – header, footer, dark bands */
  --teal-900: #1F5E5C;
  --teal-800: #276F6D;
  --teal-700: #2E8A87;
  --teal-600: #3AA6A2;
  --teal-500: #4CBCB9; /* brand primary */
  --teal-400: #6FCECB;
  --teal-300: #94DDDB;
  --teal-200: #BCE9E8;
  --teal-100: #DDF3F2;
  --teal-50:  #EFF9F9;

  /* --- Sun yellow (accent) --- */
  --yellow-900: #5C5500;
  --yellow-800: #8A8000;
  --yellow-700: #B8AB00;
  --yellow-600: #E4D400;
  --yellow-500: #FEEC01; /* brand accent */
  --yellow-400: #FFF24D;
  --yellow-300: #FFF470;
  --yellow-200: #FFF7A6;
  --yellow-100: #FFFCD6;
  --yellow-50:  #FFFEF0;

  /* --- Ink / neutrals (pencil greys on paper) --- */
  --ink-900: #141414;
  --ink-800: #262626;
  --ink-700: #3D3D3D;
  --ink-600: #565656;
  --ink-500: #6E6E6E;
  --ink-400: #949494;
  --ink-300: #B9B9B9;
  --ink-200: #DEDEDE;
  --ink-100: #ECECEC;
  --ink-50:  #F6F6F5;
  --paper:   #FFFFFF;

  /* --- Semantic status --- */
  --green-500: #2FA36B;
  --red-500:   #D8503C;
  --amber-500: #E8A93B;

  /* ============ Semantic aliases ============ */
  --color-bg: var(--paper);
  --color-surface: var(--paper);
  --color-surface-muted: var(--teal-50);
  --color-surface-inverse: var(--teal-950);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-inverse: var(--paper);
  --text-on-brand: var(--paper);

  --brand-primary: var(--teal-500);
  --brand-primary-hover: var(--teal-600);
  --brand-primary-active: var(--teal-700);
  --brand-primary-soft: var(--teal-100);
  --brand-accent: var(--yellow-500);
  --brand-accent-soft: var(--yellow-100);

  --border: var(--ink-200);
  --border-strong: var(--ink-900);
  --border-brand: var(--teal-500);

  --focus-ring: var(--teal-600);

  --link: var(--teal-700);
  --link-hover: var(--teal-800);
}