/* ==========================================================================
   DESIGN TOKENS — Be Ur Kind website
   --------------------------------------------------------------------------
   Every colour, font and timing value used on the site lives here.
   Change a value here and it updates everywhere.
   Brand colours are taken from the Be Ur Kind logo.
   ========================================================================== */

:root {
  /* ---- Brand colours (from the logo) ---- */
  --ink:          #0f2742;   /* Logo navy — main text, buttons, dark sections */
  --ink-2:        #1b3a5e;   /* Softer navy — italic highlights in headings   */
  --navy-cover:   #17385c;   /* Book cover gradient (light end)               */
  --navy-deep:    #0c2139;   /* Book cover gradient (dark end)                */
  --navy-endpaper:#10294a;   /* Inside of the book cover                      */

  --green:        #4ea83a;   /* Logo green — diamond bullets & accents        */
  --green-text:   #347f27;   /* Darker green for small text (meets WCAG AA)   */
  --green-light:  #6cbf3c;   /* Logo green gradient (top)                     */
  --green-dark:   #2f8f2a;   /* Logo green gradient (bottom)                  */

  --blue:         #1c7fe0;   /* Logo blue — links on hover, focus rings       */
  --sky:          #27b4f0;   /* Logo light blue                               */
  --sky-light:    #9fd3f5;   /* Italic highlight on navy background           */
  --blue-deep:    #0b3fa6;   /* Logo blue gradient (dark end)                 */

  /* ---- Neutrals ---- */
  --paper:        #f6f4ef;   /* Page background (warm off-white)              */
  --paper-2:      #ece8de;   /* Slightly darker paper                         */
  --sheet:        #fbfaf6;   /* Book pages & cards                            */
  --muted:        #5d6978;   /* Secondary text (5.1:1 contrast on paper)      */
  --line:         rgba(15, 39, 66, .13);  /* Hairline dividers                */
  --error:        #b3261e;   /* Form error text                               */
  --white:        #ffffff;

  /* ---- Typography ---- */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;          /* Headings */
  --sans:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; /* Body */

  /* ---- Layout ---- */
  --container: 1240px;                    /* Max content width               */
  --gutter: clamp(20px, 4vw, 56px);       /* Side padding                    */
  --nav-height: 76px;                     /* Fixed header height             */

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);    /* Default easing for animations   */
}