/* ============================================================
   Sweet — Colour tokens
   Source: Sweet Brand Guidelines V1 (2026-05-29)
   ============================================================ */

:root {
  /* ---- Primary palette ----  (print CMYK from Brand Guidelines V1) ---- */
  --spark-lime:    #EEFC70; /* DOMINANT — energy carrier · CMYK 20 0 80 0   */
  --simple-white:  #FFFFFF; /* CMYK 0 0 0 0                                 */
  --paper-ivory:   #EDEEE6; /* default page / canvas · CMYK 10 5 12 0       */
  --focus-black:   #0B1E2F; /* all text + the logo · CMYK 100 80 50 65      */
  --future-violet: #96A0FF; /* CMYK 55 45 0 0                               */

  /* ---- Secondary palette ----  (print CMYK from Brand Guidelines V1) ---- */
  --curious-blue:   #90EBFF; /* CMYK 45 0 5 0  */
  --progress-green: #2BD295; /* CMYK 65 0 55 0 */

  /* ---- Core gradient: "Open Sky" (avatar + core brand communication)
     Linear diagonal: bottom #F3F1FF (55%) -> top #90EBFF (100%)        */
  --open-sky-from: #F3F1FF; /* 55%  · CMYK 6 6 0 0  */
  --open-sky-to:   #90EBFF; /* 100% · CMYK 45 0 5 0 */
  --gradient-open-sky: linear-gradient(45deg, var(--open-sky-from) 0%, var(--open-sky-to) 100%); /* @kind color */

  /* ---- Secondary surface gradients (backgrounds only — never replace Open Sky) ---- */
  --gradient-paper-ivory:   linear-gradient(45deg, #F8F8F8, #EDEEE6); /* @kind color */
  --gradient-spark-lime:    linear-gradient(45deg, #F7F8E7, #F2FAA9); /* @kind color */
  --gradient-future-violet: linear-gradient(45deg, #F1F2FF, #C3C9FF); /* @kind color */
  --gradient-curious-blue:  linear-gradient(45deg, #E7F3FA, #BBEFFD); /* @kind color */
  --gradient-progress-green:linear-gradient(45deg, #E8F7F1, #8AE5C3); /* @kind color */

  /* ---- Illustration: vibrant gradients (clothing / large shapes) ---- */
  --gradient-lime-vibrant:   linear-gradient(180deg, #EEFC70, #A6B524); /* @kind color */
  --gradient-violet-vibrant: linear-gradient(180deg, #96A0FF, #5662C1); /* @kind color */
  --gradient-blue-vibrant:   linear-gradient(180deg, #90EBFF, #24A2C9); /* @kind color */
  --gradient-green-vibrant:  linear-gradient(180deg, #2BD295, #12855B); /* @kind color */

  /* ---- Illustration: supporting shades (#1 light, #2 deep) ---- */
  --lime-1:   #D4E258;  --lime-2:   #A6B524;  /* deep vibrant · CMYK 40 15 100 0 (book) */
  --violet-1: #7F8AE8;  --violet-2: #5662C1;
  --blue-1:   #66D5F3;  --blue-2:   #24A2C9;
  --green-1:  #14B77C;  --green-2:  #12855B;
  --ivory-1:  #D7D9C9;  --ivory-2:  #B3B79D;

  /* ---- Illustration: skin tones ---- */
  --skin-soft-beige:  #EEE3BC;
  --skin-golden-sand: #C4B26A;
  --skin-deep-cocoa:  #706456;

  /* ---- Illustration: hair colours ---- */
  --hair-light-lime:    #F7FFB4;
  --hair-future-violet: #96A0FF;
  --hair-curious-blue:  #90EBFF;
  --hair-progress-green:#2BD295;
  --hair-focus-black:   #0B1E2F;

  /* ============================================================
     Semantic aliases — reference these in UI, not the raw names
     ============================================================ */
  --surface-page:    var(--paper-ivory);  /* app / page canvas        */
  --surface-card:    var(--simple-white);  /* cards, sheets, sidebars  */
  --surface-inverse: var(--focus-black);   /* dark sections            */
  --surface-brand:   var(--spark-lime);    /* hero / energy moments    */

  --text-primary:    var(--focus-black);
  --text-secondary:  rgba(11, 30, 47, 0.66);
  --text-muted:      rgba(11, 30, 47, 0.46);
  --text-on-dark:    var(--simple-white);
  --text-on-brand:   var(--focus-black);   /* text always dark on lime */

  --brand:           var(--spark-lime);
  --accent-violet:   var(--future-violet);
  --accent-blue:     var(--curious-blue);
  --accent-green:    var(--progress-green);

  --border-subtle:   rgba(11, 30, 47, 0.12);
  --border-strong:   rgba(11, 30, 47, 0.28);
  --border-on-dark:  rgba(255, 255, 255, 0.16);

  /* Status — mapped onto the brand secondaries */
  --success:         var(--progress-green);
  --info:            var(--curious-blue);
  --focus-ring:      var(--future-violet);
  /* NOTE: the brand book defines no error/danger colour. This is a derived
     warm red for form validation only — review with brand owner. */
  --danger:          #C8553D;
  --danger-soft:     rgba(200, 85, 61, 0.12);
}