/* =========================================================
   tokens.css — design variables, one source of truth
   Load this FIRST on every page. Nothing here renders on its
   own; it just defines the palette + fonts everything else
   reaches for via var(--...).
   ========================================================= */

:root {
    /* ---- core teal palette ---- */
    --widget-bg:    #f0fcfc;
    --header-teal:  #28a7a3;
    --shadow-color: #00796b;
    --title-color:  #004d40;
    --text-color:   #3a4a48;

    /* ---- pinks ---- */
    --border-pink:  #ffc0cb;
    --link-color:   #ff69b4;   /* hot pink */
    --link-hover:   #c71585;   /* deep pink, accents/text */

    /* ---- spring greens (uploaded palette) ---- */
    --green-deep: #81DF9A;
    --green-mid:  #BEF9CE;
    --green-soft: #C1F6CF;
    --green-pale: #C9EDD3;
    --green-leaf: #5bbf73;   /* a deeper leaf green for backgrounds */

    /* ---- mango accent ---- */
    --mango:      #ffa64d;
    --mango-deep: #f4861f;

    /* ---- warm 70s extras (used sparingly) ---- */
    --mustard:   #e3a82b;
    --burnt:     #c75b39;
    --cream:     #f7f0dd;
    --paper:     #fbf6e9;

    /* ---- layout ---- */
    --sidebar-width: 190px;
    --page-top-pad: 2.75rem;   /* shared top breathing room */

    /* ---- fonts ---- */
    --font-display: 'Bungee Shade', cursive;
    --font-western: 'Rye', serif;
    --font-body:    'Crimson Pro', Georgia, serif;
    --font-hand:    'Caveat', cursive;
}