/* ShipSimple — Color tokens
   Derived from the ShipSimple logo (3D cube), marketing site and quote app.
   Brand pillars: deep indigo NAVY (#08085E) + vivid lime GREEN (#32CD32). */

:root {
  /* ---- Brand green (primary action / accent) ---- */
  --green-50:  #EAFBEA;
  --green-100: #D8F6D8;   /* hero panel tint */
  --green-200: #B6EEB6;
  --green-300: #86E186;
  --green-400: #54D454;
  --green-500: #32CD32;   /* BRAND GREEN — logo top, buttons, accents */
  --green-600: #25A825;   /* hover / pressed */
  --green-700: #1E8A1E;   /* shield shading, deep accent */
  --green-800: #176617;

  /* ---- Brand navy (headers, structure, deep surfaces) ---- */
  --navy-50:  #EAEAF3;
  --navy-100: #C9C9E0;
  --navy-300: #6E6EA8;
  --navy-500: #161680;
  --navy-700: #0D0D5C;
  --navy-900: #08085E;    /* BRAND NAVY — app headers, logo left face */
  --navy-950: #050540;

  /* ---- Neutrals (logo silver-grey + UI greys) ---- */
  --white:    #FFFFFF;
  --grey-50:  #F5F7FA;    /* app canvas */
  --grey-100: #EDEFF3;
  --grey-200: #E2E5EB;    /* hairline borders, card outlines */
  --grey-300: #CBD0D9;
  --grey-400: #939597;    /* logo silver-grey */
  --grey-500: #74727F;    /* muted body copy in app */
  --grey-600: #55555F;
  --grey-700: #3A3A45;
  --black:    #0A0A0A;    /* hero headlines */

  /* ---- Semantic status ---- */
  --success: #25A825;
  --success-bg: #EAFBEA;
  --warning: #E8A317;
  --warning-bg: #FDF3DC;
  --danger:  #D83A34;
  --danger-bg: #FCEAE9;
  --info:    #08085E;
  --info-bg: #EAEAF3;

  /* ---- Semantic aliases (use these in product UI) ---- */
  --brand:            var(--green-500);
  --brand-strong:     var(--green-600);
  --brand-deep:       var(--green-700);
  --brand-navy:       var(--navy-900);

  --text-strong:      var(--navy-900);   /* headings in app/blog */
  --text-display:     var(--black);      /* big hero headlines */
  --text-body:        var(--grey-700);
  --text-muted:       var(--grey-500);
  --text-on-brand:    var(--white);
  --text-on-navy:     var(--white);
  --text-link:        var(--green-600);

  --surface-page:     var(--grey-50);
  --surface-card:     var(--white);
  --surface-tint:     var(--green-100);  /* light-green hero / promo panels */
  --surface-tint-soft:var(--green-50);
  --surface-navy:     var(--navy-900);   /* dark headers / banners */

  --border-subtle:    var(--grey-200);
  --border-strong:    var(--grey-300);
  --border-brand:     var(--green-500);
  --focus-ring:       var(--green-500);
}