/* ============================================================
   smart-me Design Tokens
   Source: smart-me Design Wiki (Product Design) via
   https://github.com/eCarUp/design-guidelines/tree/main/smart-me
   Drop into your global stylesheet (:root).
   ============================================================ */

:root {
  /* ---------- Brand / Primary ---------- */
  --sm-blue:        #28599A;  /* primary brand color  rgb(40,89,154)   */
  --sm-blue-dark:   #003061;  /* rgb(0,48,97)    */
  --sm-blue-50pct:  #93ACCC;  /* blue 50%  rgb(147,172,204) */
  --sm-blue-25pct:  #C9D5E6;  /* blue 25%  rgb(201,213,230) */
  --sm-blue-10pct:  #E9EEF5;  /* blue 10%  rgb(233,238,245) */
  --sm-blue-5pct:   #F4F6FA;  /* blue 5% - primary light background  rgb(244,246,250) */

  /* ---------- Secondary (green) ---------- */
  --sm-green:        #52AE32;
  --sm-green-dark:   #21570F;
  --sm-green-light:  #A8D698;
  --sm-green-hover:  #EEF7EB;

  /* ---------- Neutral grey ---------- */
  --sm-ci-grey:     #F0F0F0;
  --sm-grey-200:    #FFFFFF;
  --sm-grey-400:    #F2F2F2;
  --sm-grey-500:    #DDDDDD;
  --sm-grey-600:    #CCCCCC;
  --sm-grey-800:    #666666;
  --sm-grey-900:    #434343;
  --sm-grey-1000:   #272727;  /* near-black text */

  /* ---------- Semantic ---------- */
  --sm-success:        #52AE32;  --sm-success-dark: #3E722B;  --sm-success-light: #EEF7EB;  --sm-success-hover: #D3EACB;
  --sm-warning:        #FF9800;  --sm-warning-dark: #D68100;  --sm-warning-light: #FFCB7F;  --sm-warning-hover: #FFF0D9;
  --sm-error:          #D12604;  --sm-error-dark:   #AA1F04;  --sm-error-light:   #E79281;  --sm-error-hover:   #F8DFDA;
  --sm-info:           #2196F3;  --sm-info-dark:    #0E6CB9;  --sm-info-light:    #F2F9FF;  --sm-info-hover:    #DEEFFD;

  /* ---------- Multi-energy (energy-type accent colors) ---------- */
  --sm-energy-yellow:        #F2CB47;  --sm-energy-yellow-dark:  #DDAE13;  --sm-energy-yellow-light:  #F9E5A3;  --sm-energy-yellow-hover:  #FDF7E4;
  --sm-energy-lime:          #B4D23B;  --sm-energy-lime-dark:    #7DA638;  --sm-energy-lime-light:    #D9E89C;  --sm-energy-lime-hover:    #F4F8E2;
  --sm-energy-celeste:       #7DCDEB;  --sm-energy-celeste-dark: #41A7CD;  --sm-energy-celeste-light: #BDE5F4;  --sm-energy-celeste-hover: #ECF8FC;
  --sm-energy-orange:        #F29844;  --sm-energy-orange-dark:  #C9720E;  --sm-energy-orange-light:  #F8CBA1;  --sm-energy-orange-hover:  #FDF0E3;
  --sm-energy-red:           #D55700;  --sm-energy-red-dark:     #AD4C00;  --sm-energy-red-light:     #E9AE7F;  --sm-energy-red-hover:     #F9E7D9;
  --sm-energy-mint:          #00C28D;  --sm-energy-mint-dark:    #037354;  --sm-energy-mint-light:    #7FE0C5;  --sm-energy-mint-hover:    #D9F6EE;
  --sm-energy-purple:        #8574F2;  --sm-energy-purple-dark:  #3A2BA1;  --sm-energy-purple-light:  #C1B9F8;  --sm-energy-purple-hover:  #EDEAFD;

  /* ---------- Semantic aliases ---------- */
  --sm-bg:            var(--sm-grey-200);   /* white primary background        */
  --sm-bg-tint:       var(--sm-blue-5pct);  /* light-blue background            */
  --sm-text:          var(--sm-grey-1000);  /* body text (near-black)           */
  --sm-text-muted:    var(--sm-grey-800);
  --sm-primary:       var(--sm-blue);
  --sm-primary-hover: var(--sm-blue-dark);
  --sm-link:          var(--sm-blue);
  --sm-border:        var(--sm-grey-500);

  /* ---------- Typography ---------- */
  --sm-font: 'Noto Sans', 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --sm-fw-regular: 400;
  --sm-fw-medium:  500;
  --sm-fw-bold:    700;

  /* ---------- Icons ---------- */
  --sm-icon-size: 24px;

  /* ---------- Corner radius ---------- */
  --sm-radius-sm: 4px;
  --sm-radius-md: 8px;
  --sm-radius-lg: 14px;
  --sm-radius-pill: 9999px;

  /* ---------- Elevation ---------- */
  --sm-shadow-sm: 0 1px 2px rgba(0, 48, 97, .06), 0 1px 3px rgba(0, 48, 97, .08);
  --sm-shadow-md: 0 4px 12px rgba(0, 48, 97, .08), 0 2px 4px rgba(0, 48, 97, .06);
  --sm-shadow-lg: 0 12px 32px rgba(0, 48, 97, .12), 0 4px 8px rgba(0, 48, 97, .06);

  /* ---------- Spacing scale (8pt-ish) ---------- */
  --sm-space-1: 4px;
  --sm-space-2: 8px;
  --sm-space-3: 12px;
  --sm-space-4: 16px;
  --sm-space-5: 24px;
  --sm-space-6: 32px;
  --sm-space-7: 48px;
  --sm-space-8: 64px;
}