/* Hunger House — Color tokens
   Sampled directly from the brand logo: teal roofline, warm sand inner peak,
   pale mint outline. Warm, hopeful, faith-centered palette for children's ministry. */

:root {
  /* ── Brand teal (primary) — the roofline + wordmark ── */
  --teal-900: #00403F;
  --teal-800: #005454;
  --teal-700: #006C6C;
  --teal-600: #008484; /* core brand teal */
  --teal-500: #1A9A99;
  --teal-400: #57B6B5;
  --teal-300: #93D1D0;
  --teal-200: #C2E6E5;
  --teal-100: #DCF1F0;
  --teal-50:  #ECF8F7;

  /* ── Warm sand (secondary) — the inner peak of the roof ── */
  --sand-700: #8A7A5C;
  --sand-600: #A8946F;
  --sand-500: #C2AE8A;
  --sand-400: #CCC0A8; /* core brand sand */
  --sand-300: #DBD2C0;
  --sand-200: #E8E1D4;
  --sand-100: #F2EDE4;
  --sand-50:  #FAF7F1;

  /* ── Mint (tertiary accent) — the pale outer roofline ── */
  --mint-400: #9FE0DE;
  --mint-300: #C2EBEA;
  --mint-200: #CCF0F0;
  --mint-100: #E2F7F6;

  /* ── Sunlit accents — warmth + joy (from craft/coloring materials) ── */
  --sun-600:  #E8A93B; /* marigold */
  --sun-500:  #F4BE55;
  --coral-500:#E8745B; /* warm coral for highlights/alerts */
  --coral-400:#F08E76;

  /* ── Neutrals — warm-tinted grays so nothing feels clinical ── */
  --ink-900:  #2B2A26;
  --ink-700:  #4A483F;
  --ink-500:  #6E6B60;
  --ink-400:  #908C7F;
  --ink-300:  #B8B3A4;
  --line-200: #E4DFD4;
  --line-100: #EFEBE1;
  --paper:    #FBF8F2; /* warm cream page background */
  --white:    #FFFFFF;

  /* ── Semantic — feedback ── */
  --success:  #2E9E6B;
  --warning:  #E8A93B;
  --danger:   #D5573B;
  --info:     #008484;

  /* ── Semantic aliases — use these in components ── */
  --color-brand:           var(--teal-600);
  --color-brand-strong:    var(--teal-700);
  --color-brand-soft:      var(--teal-100);
  --color-accent:          var(--sand-400);
  --color-accent-strong:   var(--sand-600);
  --color-highlight:       var(--sun-500);

  --surface-page:          var(--paper);
  --surface-card:          var(--white);
  --surface-soft:          var(--sand-50);
  --surface-brand:         var(--teal-600);
  --surface-brand-soft:    var(--teal-50);
  --surface-inverse:       var(--teal-800);

  --text-heading:          var(--teal-800);
  --text-body:             var(--ink-700);
  --text-muted:            var(--ink-500);
  --text-on-brand:         var(--white);
  --text-on-accent:        var(--teal-900);
  --text-link:             var(--teal-600);

  --border-subtle:         var(--line-200);
  --border-default:        var(--line-100);
  --border-brand:          var(--teal-300);

  --focus-ring:            var(--teal-400);
}